h2 ~ p 未选中元素最常见原因是DOM结构不满足“同父+顺序在后”条件，需检查是否同父、h2是否在p前、排除display:none干扰。
h2 ~ p 为什么没选中任何元素
最常见原因是 DOM 结构不满足「同父 + 顺序在后」这个硬性条件。比如 h2 和 p 实际被不同 <div> 包裹，或 p 出现在 h2 标签之前（哪怕视觉上靠后）。
检查时重点看三点：
- 打开浏览器开发者工具，确认两个元素是否都直接挂在同一个父节点下（即
parentNode相同） - 查看 HTML 源码顺序，
h2必须写在p的前面，不能靠order、flex-direction: row-reverse或 JS 移动来“假装”在前 - 排除
display: none元素干扰——它不参与兄弟链计算；但visibility: hidden不影响匹配
想选中“所有后续同级 p”，但中间夹着 div 怎么办
h2 ~ p 本身就能跨过中间任意数量的其他兄弟元素，只要它们同级。比如这段 HTML：
<h2>标题</h2> <div>无关内容</div> <p>段落1</p> <span>又一个间隔</span> <p>段落2</p>
上面两个 <p> 都会被 h2 ~ p 选中。
立即学习“前端免费学习笔记（深入）”；
但如果你真正想要的是「h2 后面所有 p，包括嵌套在后续 <div> 里的」，那就不是兄弟选择器能解决的了——得用组合写法：h2 ~ p, h2 ~ * p。其中：
-
h2 ~ p匹配同级后续的p -
h2 ~ * p先找到h2后面任意同级元素（*），再找它的任意后代p
多个目标类名要一起控制，要不要重复写 ~
不用。可以用逗号分隔多个选择器，复用同一组样式声明：
.input.error ~ .hint,
.input.error ~ .icon-help,
.input.error ~ .suggestions {
opacity: 1;
}但更推荐用统一 class 做归一化处理，比如给所有提示元素加 data-hint 属性，然后写：.input.error ~ [data-hint]。这样维护成本更低，也避免漏掉新增类型。
注意：每个 ~ 关系必须单独写，不能简写成 .input.error ~ .hint, .icon-help——后者等价于 .input.error ~ .hint 和 .icon-help 两个独立规则，第二个没约束关系。
和 + 混用时容易踩的坑
+ 和 ~ 都只看 DOM 顺序，不看渲染位置。但它们的语义完全不同：
-
h2 + p只命中第一个紧挨着的p，哪怕后面还有十个p也不管 -
h2 ~ p会把后面所有符合条件的p全部拉进来 - 两者都不能跨 shadow boundary、不能向上匹配、不能穿透
display: contents父容器
真实项目里最容易忽略的是：当父容器用了 display: contents，子元素会脱离文档流，此时原本的兄弟关系就失效了——~ 会直接不生效，连报错都不会有。
