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

本文转载自查看原文 2018-04-13 09:18 1972 css

要点：

举个栗子：

　　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 选上

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css——子代与后代选择器 css 后代选择器多级嵌套 css样式,后代选择器 css-交集选择器、后代选择器 CSS的子选择器与后代选择器的区别 CSS之后代选择器与多类选择器 Css 后代选择器与子代选择器的区别后代选择器（CSS选择器） CSS系列之后代选择器、子选择器和相邻兄弟选择器 CSS后代选择器,子选择器和相邻兄弟选择器