CSS相邻兄弟选择器是CSS选择器体系中的一种，主要作用是选中紧邻在某个指定元素之后的第一个兄弟元素，从而为其设置特定的样式，非常适合处理元素间紧邻的样式控制需求。
CSS相邻兄弟选择器的基本语法
相邻兄弟选择器的符号是加号+，语法格式为：元素A + 元素B，表示选中所有紧邻在元素A后面，且和元素A属于同一父元素下的第一个元素B。这里需要注意两个核心前提，一是两个元素必须是兄弟关系，也就是有共同的父元素，二是元素B必须直接跟在元素A的后面，中间不能有其他元素间隔。
基础使用示例
下面通过一个简单的列表场景来演示基础用法，假设我们有一个无序列表，需要给每个列表项中第一个span元素后面的p元素设置不同的颜色：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 选中紧邻在span后面的第一个p元素 */
span + p {
color: #ff5500;
font-weight: bold;
}
</style>
</head>
<body>
<div class="list">
<div class="item">
<span>标题一</span>
<p>这是紧邻span的第一个段落，会被选中</p>
<p>这是第二个段落，不会被选中</p>
</div>
<div class="item">
<span>标题二</span>
<p>这也是紧邻span的第一个段落，会被选中</p>
</div>
</div>
</body>
</html>
运行上面的代码可以看到，每个span后面第一个p元素的文字会变成橙色加粗，而后续的p元素不会受到影响，这就是相邻兄弟选择器的基础效果。
常见使用场景
表单元素关联样式
在表单开发中，经常需要给选中状态的单选框或复选框后面的标签设置样式，这时候相邻兄弟选择器就非常实用：
/* 当复选框被选中时，修改后面label的样式 */
input[type="checkbox"]:checked + label {
color: #1677ff;
font-weight: 600;
}
对应的HTML结构如下：
<div class="form-item">
<input type="checkbox" id="agree">
<label for="agree">我已阅读并同意用户协议</label>
</div>
当用户勾选复选框时，后面的标签文字就会变成蓝色加粗，不需要额外的JavaScript代码就能实现交互样式效果。
标题后首段样式调整
在文章排版中，经常需要给标题后面的第一个段落设置首字下沉或者更大的字号，用相邻兄弟选择器可以快速实现：
h2 + p {
font-size: 16px;
line-height: 1.8;
text-indent: 2em;
color: #333;
}
这样所有h2标题后面的第一个p段落都会应用对应的样式，后续的段落保持默认样式，排版效果更统一。
使用注意事项
- 相邻兄弟选择器只能选中指定元素后面的第一个紧邻兄弟元素，无法选中更后面的元素，如果需要选中后面所有兄弟元素，可以使用通用兄弟选择器
~。 - 两个元素必须是同级兄弟关系，如果中间间隔了其他元素，即使后面有同类型元素也不会被选中。
- 选择器的顺序不能颠倒，
A + B是选中A后面的B，不能写成B + A来选中B前面的A，CSS选择器是从左到右匹配的，不支持反向选择。 - 如果元素A不存在，那么对应的相邻兄弟元素B也不会被选中，选择器不会生效。
和其他兄弟选择器的区别
很多开发者会混淆相邻兄弟选择器和通用兄弟选择器，我们可以通过下面的表格来明确两者的差异：
| 选择器类型 | 符号 | 匹配规则 | 适用场景 |
|---|---|---|---|
| 相邻兄弟选择器 | + | 选中指定元素后紧邻的第一个兄弟元素 | 只需要控制紧邻的第一个元素样式时使用 |
| 通用兄弟选择器 | ~ | 选中指定元素后所有符合条件的兄弟元素 | 需要控制后面多个同类型兄弟元素样式时使用 |
掌握CSS相邻兄弟选择器的用法，可以让我们在样式开发中减少不必要的类名添加，让HTML结构更简洁，同时也能实现很多纯CSS的交互样式效果，提升开发效率。
CSS相邻兄弟选择器紧邻元素样式前端样式控制+选择器选择器用法修改时间：2026-06-09 08:36:25