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后代選擇器,子選擇器和相鄰兄弟選擇器