【CSS兄弟选择器】

作者：运维做开发 | 2024-07-07 15:50:27

踩

兄弟选择器

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

html:
<div>
	<h2>标题部分</h2>
	<p>111</p>
	<p>222</p>
	<p class="on">333</p>
</div>
1
2
3
4
5
6
7

- 兄弟选择器 “+”

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

- 兄弟选择器 “~”

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

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

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

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】