CSS子類選擇器和後代選擇器的區別
阿新 • • 發佈:2018-12-25
一.介紹
1.子類選擇器
子類選擇器僅僅指的是父元素的直接後代,大家可以理解為僅作用於第一代子元素,通過“>”進行選擇。
2.後代選擇器
後代選擇器則指的是作用於所有後代元素,通過空格來進行選擇。 話不多說,接下來通過程式碼給大家演示。
二.舉例
<ul class="clothes">
<li>衣服
<ul>
<li>T恤</li>
<li>襯衣</li>
<li >短袖</li>
</ul>
</li>
<br>
<li>褲子
<ul>
<li>牛仔褲</li>
<li>休閒褲</li>
<li>七分褲</li>
</ul>
</li>
</ul>
這是沒有任何樣式的,我們在瀏覽器中顯示如下:
接下來我們使用子類選擇器”.clothes>li”表示給class為clothes的子類li(第一代子類)新增一個紅色邊框。
<script>
$(function () {
$(".clothes>li").css("border","1px solid red");
});
</script>
瀏覽器顯示效果如下圖所示:
我們可以看到只有第一代子類為li(衣服、褲子)的加上了紅色邊框,而其他的如T恤、牛仔褲等等並沒有任何樣式。
接下來我們換用後代選擇器”.clothes li”表示給class為clothes所有後代為li的子類新增一個紅色邊框。
<script>
$(function () {
$(".clothes li").css("border","1px solid red");
});
</script>
瀏覽器顯示效果如下圖所示:
我們可以看到所有後代為li的元素都加上了紅色邊框,不僅僅是第一代子元素了。
三.總結
總結:>作用於元素的第一代後代,空格作用於元素的所有後代。