CSS基礎----層次選擇器

測試代碼

後代選擇器

E F { } 功能描述：影響的F元素被包含在E元素內（E影響下面所有層次的元素F）

只打開後代選擇器的代碼，不打開的都默認註釋掉

/*後代選擇器*/
body p{
	background: red;
}

可以看到body標籤下的所有p標籤都被影響

子選擇器

E>F { } 功能描述：影響的F是E的子元素（E影響下一層的元素F，僅僅是下一層的F）

打開後代選擇器和子選擇器

/*後代選擇器*/
body p{
	background: red;
}
/*子選擇器*/
body>p{
	background: pink;
}

可以看到只有p1p2p3變成了粉紅色，說明子選擇器生效，原因是隻有p1p2p3纔是body標籤的兒子，p4p5p6並不是body標籤的兒子，因爲中間有ul和li標籤。
其實此時p1p2p3依然受後代選擇器的影響，但是由於子選擇器在後代選擇器後面，可以理解爲後代選擇器的影響被子選擇器覆蓋了

相鄰兄弟選擇器

後代選擇器&子選擇器&相鄰兄弟選擇器同時打開

E+F { } 功能描述：影響的F緊鄰E後面（且E和F同一層次）

/*後代選擇器*/
body p{
	background: red;
}
/*子選擇器*/
body>p{
	background: pink;
}
/*/!*相鄰兄弟選擇器*!/*/
.active + p{
	background: green;
}

因爲p1的class屬性是active，相鄰兄弟選擇器只對緊鄰後面的元素生效

爲了進一步驗證相鄰兄弟選擇器的影響範圍隻影響緊鄰後面的元素，而不是前後都影響或者其他，試試下面的栗子的結果

<p>p1</p>
<p  class="active">p2</p>
<p>p3</p>
<p>p4</p>

通用兄弟選擇器

四個選擇器都打開

E+F { } 功能描述：E影響用一層次的所有F

/*後代選擇器*/
body p{
	background: red;
}
/*子選擇器*/
body>p{
	background: pink;
}
/*相鄰兄弟選擇器*/
.active + p{
	background: green;
}
/*通用選擇器*/
.active~p{
	background: yellow;
}

由於還是h2的class=“active”，所以只有p3和p4被影響