css选择器兄弟选择器相邻兄弟选择器⼦元素选择器
1.兄弟选择器： ~
该选择器会选择当前元素之后的所有相邻指定元素（具有相同⽗元素的兄弟元素）；
.p ~ li{
color: blue;
}
<div>
<p class="p">我是p元素</p>
<strong>我是strong元素</strong>
css选择器分为哪几类<li>我是li元素</li> /*li元素被选中*/
</div>
2.相邻兄弟选择器： +
该选择器会选择当前元素相邻的第⼀个兄弟元素（不管指定不指定相邻兄弟元素的类型，都会选择相邻第⼀个元素，如果没有匹配到则不给定样式）；
.p + li {
color: red;
}
<p class="p">我是p元素</p>
<li>我是紧邻的li元素</li> /*紧邻的li被选中；如果紧邻p元素的的不是li元素，则没有选中任何元素就⽆法添加指定样式*/
<strong>我是strong元素</strong>
3.⼦元素选择器： >
该选择器会选择该元素下的指定⼦元素（只包括⼦元素，除了⼦元素以外的后代选择器不被选择）；
.p > li {
color: green;
}
<p class="p">
<strong>我是strong</strong>
<li>我是li1</li> /*被选中*/
<li> /*被选中*/
我是li2
<li>我是p元素的孙⼦元素li</li> /*作为p元素的孙⼦元素，不被选中*/
</li>
<span>我是span</span>
</p>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。