临近兄弟:用 + 表示,只匹配该元素后边的第一个同级元素。
普通兄弟:用 ~ 表示,匹配该元素后边的所有同级元素。
例子:
<style>
div#aa p{
font-size:14px;
color:#000;
}
div#aa p.on{
color:#f00;
}
div#aa p.on ~span{
color:#00f;
}
div#aa p.on +span{
font-weight:bold;
}
</style>
<div id="aa">
<p class="on">sdf</p>
<span>sdf</span>
<span>sdf</span>
</div>
//当把p的class设为on的时候,span的样式也跟着改变。
时间: 2024-10-22 18:18:47