通用兄弟选择器~的基本写法是“A ~ B”，用于选中同一父元素下、在A之后的所有同级B元素；A与B必须同父、同级、A在B前，中间可隔任意兄弟，不跨层级、不向前匹配。
通用兄弟选择器 ~ 的基本写法和生效条件
通用兄弟选择器 ~ 只匹配**同一父元素下、位于某元素之后的所有同级兄弟元素**，且不关心中间隔了多少个其他兄弟。它不会选中该元素本身，也不会选中其子元素或祖先元素。
常见误用是把它当成“后面所有元素”或“包含子元素”的选择器——它只看 DOM 树中的同层位置关系。
- 必须是同一个父容器内的直接子元素（即“兄弟”，不是“堂兄弟”）
-
A ~ B中的A必须在 HTML 中真实出现在B之前（顺序不能颠倒） -
A和B不需要相邻，中间可以有任意多个其他兄弟元素
为什么 h2 ~ p 有时不生效？检查这三点
典型失效场景：页面里明明有 <h2></h2> 后面跟着几个 <p></p>，但样式没应用上。大概率是以下原因之一：
- 这些
<p>并不在<h2>的同一父级下（比如被嵌套进了<div>或<section>里） -
<h2>元素本身是动态插入的，但 CSS 规则在插入前就已加载完毕（此时规则仍有效，但需确认是否被更高优先级样式覆盖） - 浏览器解析时，
<h2>实际出现在某些<p>之后（例如模板中p写在前面，靠 CSS order 或 JS 移动了视觉位置）
配合伪类和属性选择器提升实用性
单纯用 ~ 选中“所有后续兄弟”往往太宽泛，实际项目中常叠加条件缩小范围：
立即学习“前端免费学习笔记（深入）”；
-
h2:first-of-type ~ p：只从第一个<h2>开始向后匹配<p> -
[data-section="intro"] ~ .content-item：选中某个带特定属性的元素之后所有带.content-item类的兄弟 -
input:checked ~ label：常用于自定义单选/复选按钮，点击input后高亮其后的label
注意：:checked 是动态状态，~ 在此场景下完全依赖 DOM 顺序，不能跨父容器联动。
和相邻兄弟选择器 + 的关键区别
很多人混淆 ~ 和 +。它们唯一区别就是“是否要求紧邻”：
-
A + B：只匹配紧挨在A后面的那个B兄弟（且必须是下一个同级元素） -
A ~ B：匹配A后面**所有**满足条件的B兄弟，无论中间隔了几个其他元素
例如 HTML：<div class="a"></div><span>x</span><div class="b">1</div><div class="b">2</div>
那么 .a + .b 只匹配第一个 .b；而 .a ~ .b 会同时匹配两个 .b。
真正容易被忽略的是：这两个选择器都**无法向上查找或跨层级作用**——哪怕结构看起来“逻辑连贯”，只要不符合严格的同父+顺序规则，就什么也选不到。
