【CSS兄弟选择器】

最近写项目时,发现使用兄弟选择器频繁,特此总结一下常用的兄弟选择器,我常用于如果A存在,则给B加特定样式,若A不存在,B是其它样式的情况,使用兄弟选择器很方便,供参考。

html:
<div>
	<h2>标题部分</h2>
	<p>111</p>
	<p>222</p>
	<p class="on">333</p>
</div>

- 兄弟选择器 “+”

表示某元素后相邻的兄弟元素,也就是紧挨着的,选中的是单个的
选中h2下面的第一个p : h2+p{ }

- 兄弟选择器 “~”

表示某元素后所有同级的指定元素,选中的是所有的
选中h2下面的所有p : h2~p{ }

- 如果想选中特定兄弟元素需要"~" 和 “.类名” 搭配使用

选中h2下面的类名为on的元素 : h2~.on{ }

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码

)">
< <上一篇
下一篇>>