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

要点：

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

 

posted @ 2018-04-13 09:18  腊鸭  阅读(2994)  评论(0)    收藏  举报