在CSS的选择器体系中，~符号代表通用兄弟选择器，它的作用是匹配某个元素之后的所有同层级指定类型的兄弟元素，且这些兄弟元素不需要紧邻该元素。这个选择器的语法格式为E~F，其中E是基准元素，F是要选择的目标兄弟元素，两者必须拥有相同的父元素，且F元素出现在E元素之后。
通用兄弟选择器的基础语法
通用兄弟选择器的核心逻辑是基于元素在DOM树中的位置和层级关系进行匹配，它不会选择E元素之前的兄弟元素，也不会选择不同父元素下的元素。下面是一个最基础的示例，展示~选择器的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 选择h2之后所有的p兄弟元素 */
h2~p {
color: #ff0000;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<p>这是h2之前的p元素，不会被选中</p>
<h2>标题内容</h2>
<p>这是h2之后的第一个p元素，会被选中</p>
<span>这是一个span元素，不会被选中</span>
<p>这是h2之后的第二个p元素，会被选中</p>
</div>
</body>
</html>
在上面的代码中，h2~p只会匹配h2元素后面同属container父元素下的所有p元素，h2前面的p元素和中间的span元素都不会被匹配到。
和相邻兄弟选择器的区别
很多开发者会把~和相邻兄弟选择器+搞混，两者的核心差异在于匹配的范围不同：
E~F：匹配E元素之后所有符合条件的F兄弟元素，不要求紧邻E+F：仅匹配E元素之后紧邻的第一个符合条件的F兄弟元素
我们可以通过下面的对比代码更直观地看到差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 通用兄弟选择器 */
.test1~p {
color: blue;
}
/* 相邻兄弟选择器 */
.test2+p {
color: green;
}
</style>
</head>
<body>
<div class="box">
<p>通用兄弟选择器测试前的p</p>
<div class="test1">通用兄弟基准元素</div>
<p>通用兄弟1</p>
<p>通用兄弟2</p>
<p>相邻兄弟选择器测试前的p</p>
<div class="test2">相邻兄弟基准元素</div>
<p>相邻兄弟1</p>
<p>相邻兄弟2</p>
</div>
</body>
</html>
运行后可以看到，通用兄弟选择器匹配了test1后的两个p元素，而相邻兄弟选择器只匹配了test2后的第一个p元素。
实际应用场景
通用兄弟选择器在开发中常用于处理元素状态变化后的批量样式调整，比如表单交互、选项卡切换等场景。下面是一个表单校验的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 输入框校验失败时，选中后面的所有提示文本 */
input.error~.tip {
color: #ff4444;
display: block;
}
.tip {
display: none;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="form-item">
<input type="text" class="error" placeholder="请输入手机号">
<span class="tip">手机号格式不正确</span>
<span class="tip">请输入11位有效手机号</span>
</div>
</body>
</html>
当输入框添加error类时，~选择器会匹配后面所有的tip类元素，统一显示错误提示，不需要逐个给提示元素添加状态类。
注意事项
使用通用兄弟选择器时需要注意几个问题：
- 选择器只能向后匹配，无法选择基准元素之前的兄弟元素
- 基准元素和目标元素必须同属一个父元素，跨父元素无法匹配
- 选择器的优先级遵循CSS常规优先级规则，和其他类选择器、元素选择器的优先级计算方式一致
通用兄弟选择器是CSS中处理同层级元素关系的重要工具，合理使用可以减少冗余的类名添加，让样式逻辑更清晰。