<p>h2 ~ p没生效是因为p元素不在h2的同级后续位置，而是嵌套在div等容器内，导致DOM层级不满足通用兄弟选择器要求；正确方案是组合h2 ~ p和h2 ~ * p覆盖所有同级及嵌套场景。</p>
h2 ~ p 为什么没生效？先确认 DOM 层级关系
通用兄弟选择器 h2 ~ p 只匹配与 h2 同一父元素下的、在其之后出现的所有同级 p 元素。它不跨层级，也不看视觉顺序——只认 HTML 源码中真实的父子和兄弟关系。
常见失效原因：
-
p被包在div、section或其他容器里，导致它不再是h2的同级兄弟，而是“侄子”或“远房堂兄弟” -
h2实际写在p后面（比如模板中p先写，靠 CSSorder或 JS 移动了位置），DOM 顺序决定一切 - 父容器用了
display: contents，让子元素脱离文档流，兄弟关系被破坏
想选“h1 之后所有 p”，光用 h1 ~ p 不够
h1 ~ p 只能选中和 h1 同级且在其后的 p；但实际页面里，很多 p 是嵌套在后续 div、article 里的——它们不是兄弟，是后代。
正确写法是组合两个选择器：
立即学习“前端免费学习笔记（深入）”；
-
h1 ~ p：覆盖直接同级的后续p -
h1 ~ * p：先用*匹配h1后面任意同级元素（如div、section），再通过空格选其内部所有p后代
注意：h1 ~ * > p 是错的——> 只抓直接子元素，会漏掉 div > aside > p 这类多层嵌套结构。
~ 和 + 的关键区别：是否要求“紧邻”
h2 + p 只命中紧跟在 h2 后面的那一个 p；h2 ~ p 则不管中间隔了几个其他兄弟，只要同级、在后，就全选。
例如 HTML 是：<h2></h2><span>xxx</span><p>1</p><hr><p>2</p>
-
h2 + p只匹配第一个p -
h2 ~ p会匹配两个p
别指望 + 做批量控制——那是 ~ 的职责。
display: none 的元素不参与 ~ 匹配
~ 选择器依赖浏览器渲染时的盒模型链。如果某个兄弟元素设置了 display: none，它根本不会生成盒，也就不会出现在兄弟序列中，自然无法作为 ~ 的起点或目标。
但 visibility: hidden 或 opacity: 0 不影响匹配——这些元素仍保留在 DOM 树和兄弟关系里。
所以动态控制显隐时，优先用 visibility 配合 ~，避免因 display: none 导致样式链断裂。
真正容易被忽略的是：h1 ~ * p 中的 * 并非低效操作，现代浏览器已对此类通配符做深度优化；但它确实要求你明确接受“所有后续同级容器都可能成为目标载体”这一前提——如果页面结构松散，这个选择器可能比预期更宽泛。
