CSS通用兄弟选择器用于选择同一父元素下，位于指定元素之后的所有符合条件的兄弟元素，它的核心作用是批量给后续兄弟元素设置统一或差异化的样式，减少冗余的CSS代码编写。
CSS通用兄弟选择器基础语法
通用兄弟选择器的语法格式为元素A ~ 元素B，其中元素A是基准元素，元素B是要选择的目标兄弟元素，两个元素之间用波浪号~连接。它的匹配规则是：元素B和元素A拥有同一个父元素，并且元素B在元素A的后面（不一定是紧邻的下一个），只要满足这两个条件就会被选中。
下面是一个基础的使用示例，我们给类名为base的div元素之后的所有p元素设置文字颜色为蓝色：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.base ~ p {
color: #2196f3;
}
</style>
</head>
<body>
<div class="container">
<p>这是第一个p元素，在base元素前面</p>
<div class="base">基准元素</div>
<p>这是第二个p元素，在base元素后面，会被选中</p>
<span>这是span元素，不会被选中</span>
<p>这是第三个p元素，在base元素后面，会被选中</p>
</div>
</body>
</html>
运行上面的代码可以看到，第一个p元素因为排在base元素前面，所以文字颜色没有变化，第二个和第三个p元素都变成了蓝色，而中间的span元素因为不是p元素，所以没有被选中。
通用兄弟选择器的使用注意事项
- 只能选择后续元素：通用兄弟选择器只能匹配指定元素后面的兄弟元素，无法选择前面的元素，如果需要选择前面的元素，需要换用其他选择器方案。
- 必须同属一个父元素：元素A和元素B必须有相同的直接父元素，如果父元素不同，即使元素B在元素A的后面，也不会被匹配到。
- 优先级遵循CSS规则：通用兄弟选择器的优先级和类选择器、属性选择器同级，具体优先级计算遵循CSS标准的优先级规则。
后续元素样式应用技巧
1. 实现交互联动效果
结合:checked伪类，可以用通用兄弟选择器实现点击表单元素后修改后续元素样式的效果，比如常见的折叠面板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.toggle-checkbox {
display: none;
}
.toggle-label {
padding: 8px 16px;
background-color: #f0f0f0;
cursor: pointer;
display: inline-block;
}
.toggle-checkbox:checked ~ .panel {
display: block;
}
.panel {
display: none;
padding: 16px;
border: 1px solid #ddd;
margin-top: 8px;
}
</style>
</head>
<body>
<div class="toggle-container">
<input type="checkbox" id="toggle" class="toggle-checkbox">
<label for="toggle" class="toggle-label">点击展开内容</label>
<div class="panel">
这是折叠面板的内容，点击上面的标签可以切换显示和隐藏
</div>
</div>
</body>
</html>
2. 批量设置列表后续项样式
当需要给列表里第一个元素之后的所有项设置不同样式时，通用兄弟选择器可以简化代码，比如给除第一个外的列表项添加上边框：
/* 列表第一个li之后的所有li都添加上边框 */
li:first-child ~ li {
border-top: 1px solid #eee;
padding-top: 12px;
margin-top: 12px;
}
3. 结合属性选择器做差异化样式
可以给后续元素添加属性筛选，比如给input元素之后所有带有required属性的span提示元素设置红色样式：
input ~ span[required] {
color: #f44336;
font-size: 12px;
}
常见问题解答
问：通用兄弟选择器和相邻兄弟选择器有什么区别？
答：相邻兄弟选择器A + B只能选择紧邻A后面的第一个B元素，而通用兄弟选择器A ~ B可以选择A后面所有的B元素，范围更广。
问：通用兄弟选择器能选择父元素吗？
答：不能，CSS选择器目前没有向上选择的能力，通用兄弟选择器只能选择同级的后续兄弟元素，无法选择父元素或其他层级的元素。
CSS通用兄弟选择器后续元素样式兄弟元素选择样式应用技巧修改时间：2026-07-06 20:48:25