在css中兄弟选择器+与~如何使用

相邻兄弟选择器（+）仅选中紧接在指定元素后的第一个兄弟元素，如h2 + p{color:red;}；通用兄弟选择器（~）则选中该元素之后所有同级兄弟元素，如h2 ~ p{color:blue;}。

在CSS中，兄弟选择器用于选择位于同一父元素下的某些相邻或后续的兄弟元素。主要有两种：相邻兄弟选择器（+）和通用兄弟选择器（~）。它们用法相似但作用范围不同。

相邻兄弟选择器（+）

使用+符号，它选择紧接在指定元素后的第一个兄弟元素，且两者必须有相同的父元素。

例如：

你想选中紧跟在h2后面的p元素：

h2 + p {
color: red;
}

只有当p元素直接跟在h2后面时才生效。如果中间插入了其他元素，则不匹配。

立即学习“前端免费学习笔记（深入）”；

HTML结构示例：

<h2>标题</h2>
<p>这个段落会被选中</p>
<p>这个不会被+选中</p>

通用兄弟选择器（~）

使用~符号，它选择在指定元素之后的所有同级兄弟元素，不要求紧邻。

例如：

你想选中所有在h2之后的p元素：

h2 ~ p {
color: blue;
}

只要p元素出现在h2，无论中间有没有别的元素，都会被选中。

HTML示例：

<h2>标题</h2>
<span>一些内容</span>
<p>这个也会被~选中</p>
<div>其他元素</div>
<p>这个也会被选中</p>

实际应用场景

这两种选择器常用于结构化布局或样式控制，比如文章排版、表单样式等。

• 用h1 + p设置文章首段缩进或字体加粗
• 用input:checked ~ label实现自定义复选框或选项卡切换（配合伪类）
• 控制列表中某个特定项之后的所有项的样式

注意点：

• 两个选择器都只朝文档流的后方匹配，不能选前面的元素
• 元素必须是同级兄弟，嵌套在不同父容器中无效
• +更精确，~更宽松，按需选择

基本上就这些。掌握+和~能让你更灵活地根据元素位置写样式，减少不必要的类名。