首先為了我們能明顯看到子代選擇器和後代選擇器對樣式的影響，我們定義乙個結構
我是主div
兒子孫子
執行結果如圖
上面html**的文件樹結構如圖
然後我們在標籤裡增加乙個子代選擇器
.maindiv > div{
background-color: green;
讓子代的背景色都為綠色
修改後儲存用瀏覽器開啟如圖，可見【兒子】那個div已經變為綠色
然後我們去掉子代選擇器，新增乙個後代選擇器
.maindiv div{
background-color: red;
讓後代的背景色都為紅色
修改後儲存用瀏覽器開啟如圖，可見【兒子】和【孫子】的div已經變為紅色
現在我們再看看把上面的子代和後代樣式都同時應用，效果如圖。
經過上面的結果展示，我們能得到結論。
子代選擇器：只對應用物件的直接相應子節點有效。如例項**中的兒子div。
後代選擇器：對應用物件內的所有相應子節點都有效。如例項中的兒子div和孫子div。
後代選擇器和子選擇器
後代選擇器 h1 em 選擇器可以解釋為 作為 h1 元素後代的任何 em 元素 有關後代選擇器有乙個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的巢狀層次多深。div01 ul li div0...
《選擇器》 四 子代選擇器和後代選擇器
1 doctype html 2 html lang cn 3 head 4 meta charset utf 8 5 title title title 6head 7 body 8 div id father 9 div class red 1 div 10 div 211 p 21 p 12 ...
後代選擇器
後代選擇器 找到指定標籤的所有特定的後代標籤,設定屬性。1.什麼是後代選擇器?作用 找到指定標籤的所有特定的後代標籤,設定屬性 格式 標籤名稱1 標籤名稱2 先找到所有名稱叫做 標籤名稱1 的標籤,然後再在這個標籤下面去查詢所有名稱叫做 標籤名稱2 的標籤,然後在設定屬性 div p 注意點 1.後...