具體應用

后代選擇器的功能極其強大。有了它，可以使 HTML 中不可能實現(xiàn)的任務成為可能。

假設有一個文檔，其中有一個邊欄，還有一個主區(qū)。邊欄的背景為藍色，主區(qū)的背景為白色，這兩個區(qū)都包含鏈接列表。不能把所有鏈接都設置為藍色，因為這樣一來邊欄中的藍色鏈接都無法看到。

解決方法是使用后代選擇器。在這種情況下，可以為包含邊欄的 div 指定值為 sidebar 的 class 屬性，并把主區(qū)的 class 屬性值設置為 maincontent。然后編寫以下樣式：

div.sidebar {background:blue;}

div.maincontent {background:white;}

div.sidebar a:link {color:white;}

div.maincontent a:link {color:blue;}

有關后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。

例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。

因此，ul em 將會選擇以下標記中的所有 em 元素：

• List item 1
• List item 1-1
• List item 1-2
• List item 1-3
• List item 1-3-1
• List item 1-3-2
• List item 1-3-3
• List item 1-4
• List item 2
• List item 3

總結

以上是生活随笔為你收集整理的js原生后代选择器_CSS 后代选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。