首页 > Web开发 > 详细

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

时间:2018-04-13 10:28:36      阅读:187      评论:0      收藏:0      [点我收藏+]

要点:

  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后代选择器“空格”和“>”的使用辨析

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!