普通兄弟选择器用~连接，选中同父级中位于某元素之后的所有符合条件的同级元素。如p ~ p{color:red}会使第一个p之后所有同级p变红，仅“第二段”“第三段”变色，体现“同级、之后、全部匹配”原则。

普通兄弟选择器（General Sibling Combinator）用波浪号 ~ 表示，用来选择某个元素之后的所有同级兄弟元素，只要它们共享同一个父元素，并且出现在该元素的后面。

基本语法

element ~ sibling { 样式声明 }

它选中的是：在 element 之后出现的、与它同层级的、符合条件的 sibling 元素。注意，前面的 element 不会被选中，后面的兄弟元素只要符合标签或类等条件，都会被影响。

关键理解点

• 必须是同父级的兄弟关系，不能是父子或跨层级
• 目标元素必须出现在指定元素之后，之前的兄弟不会被选中
• 后面的所有匹配的兄弟都会被选中，不只下一个

举个例子

HTML 结构：

<div>
<p>第一段</p>
<span>中间内容</span>
<p>第二段</p>
<p>第三段</p>
</div>

CSS：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

p ~ p { color: red; }

结果：只有“第二段”和“第三段”变成红色，因为它们是第一个 <p> 之后的同级 <p> 元素。“第一段”本身不受影响。

常见用途

• 在某个特殊元素出现后，改变后续同类元素的样式
• 实现如“从某一段开始，后面的文字变色”这类排版需求
• 配合状态类使用，比如 .active ~ .item 来高亮后面的选项

基本上就这些。理解重点在于“同级、之后、全部匹配”。不复杂但容易忽略顺序和层级限制。