css层次选择器
首先定义好层次,在html的body标签下定义以下元素
<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p class="test">p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="test">p7</p>
<p>p8</p>
</body>
1.后代选择器
<!-- 后代选择器 在某个元素后面 祖爷爷 爷爷 爸爸 你 -->
body p{
background : red;
}
运行结果如下:
发现body下面的p元素全部变成了红色
2.子选择器
<!-- 子选择器-一代-儿子 -->
body>p{
background : blue;
}
运行结果如下:
发现body下面的的儿子p元素全部变成了蓝色
3.相邻兄弟选择器
<!-- 相邻兄弟选择器 同辈 只有一个 相邻(向下) -->
.test + p{
background : yellow;
}
运行结果如下:
只会有一个向下的相邻元素变成黄色
4.通用兄弟选择器
<!-- 通用兄弟选择器 当前选中元素所有向下的兄弟元素 -->
.test~p{
background : green;
}
运行结果如下:
当前选中元素所有向下的兄弟元素都会变色