码迷,mamicode.com
首页 > Web开发 > 详细

CSS后代选择器“空格”和“>”的使用辨析

时间:2018-04-13 11:15:43      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:gif   分享   one   image   opened   nbsp   close   aac   size   

要点:

  1. “空格”:包含子孙

  2. “>”:含子不含孙

举个栗子:

  html代码如下

技术分享图片
 1 <body>
 2     <div class="parent">
 3         <p>1p</p>
 4         <div>2div
 5             <p>-2.1p</p>
 6             <p>-2.2p</p>
 7             <a>-2.3a</a>
 8         </div>
 9         <p>3p</p>
10         <p>4p</p>
11     </div>
12 </body>
View Code

  css代码(带空格的后代选择):

技术分享图片
1 .parent p {
2     background: red;
3 }
View Code

  结果:子代1p 3p 4p 及孙代 2.1p,2.2p都选上了

技术分享图片

 

  css代码(带“>”的后代选择):

技术分享图片
1 .parent > p {
2     background: red;
3 }
View Code

  结果:只有子代1p 3p 4p 选上

技术分享图片

 

CSS后代选择器“空格”和“>”的使用辨析

标签:gif   分享   one   image   opened   nbsp   close   aac   size   

原文地址:https://www.cnblogs.com/a7laya/p/8817945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!