通用兄弟选择器~的作用范围是：匹配同一父容器内、位于目标元素之后且与之同级的所有指定元素，不跨父级、不逆序、不嵌套匹配；如h2 ~ p仅选中与h2同父且在其后的p元素。
通用兄弟选择器 ~ 的作用范围到底是什么
~ 只匹配同级、在目标元素之后、且共享同一父容器的兄弟元素。它不跨父级，不向上找祖先，也不向下钻进子树——只看 DOM 树中“平级往后”的关系。
-
h2 ~ p会命中所有和h2同父、且出现在它后面的p元素 - 如果某个
p被包在<div> 里，而这个 <code>div是h2的后续兄弟，那h2 ~ p就选不到它（因为不是同级） - 正确写法是
h2 ~ <em> p</em>：先用匹配所有后续同级元素，再用空格选它们内部任意深度的p -
h1 ~ p→ 选中同级后续的p -
h1 ~ * p→ 选中后续任意兄弟元素内部的p（无论嵌套几层）
常见错误现象：h2 ~ p 看起来没生效，其实是目标 p 躲在了后续 section 里，被漏掉了。
怎么确保所有目标元素都被选中（含嵌套结构）
要真正覆盖“DOM 顺序上出现在某元素之后的所有某类型元素”，必须组合两个选择器：
这两个规则缺一不可。单独用 h1 ~ <em> p</em> 会漏掉直接同级的 p（因为 不匹配文本节点或注释，但更重要的是：它不匹配自身，所以 h1 后面紧挨着的 p 不会被 * p 捕获）。
立即学习“前端免费学习笔记（深入）”；
实际使用时建议写成：
h1 ~ p,
h1 ~ * p {
color: #333;
}为什么不能只用 h1 ~ div p 替代 h1 ~ * p
h1 ~ div p 只能匹配“后续兄弟中是 div 的那些元素内部的 p”，一旦后续出现 section、article 或 main，就全失效。
-
h1 ~ <em> p</em>中的是通配符，代表“任意元素”，不预设标签名 - 它等价于“先找所有后续兄弟，再对每个兄弟执行后代选择”，兼容性好，语义清晰
- 浏览器解析开销极小，无性能顾虑
别手抖写成 h1~*p：缺少空格会导致语法无效，整条规则被忽略。
表单校验提示批量显示时容易踩的坑
表单中常有多个提示元素（span.error、small.help-text、div.validation-message），都紧跟在 input.error 后面。
- 错误写法：
input.error + .hint→ 只控制第一个提示 - 正确写法：
input.error ~ .hint→ 所有同级后续的.hint都响应 - 前提是：这些提示元素必须和
input.error在同一个父容器内（比如都放在<div class="form-item"> 里） <p>如果提示元素被动态插入到别的容器（如全局 toast 区），<code>~就完全失效——这时就得换 JS 或用:has()（但注意兼容性）。真正难处理的从来不是语法，而是 DOM 结构是否满足“同父+后续”这个前提。写之前先打开 DevTools 看一眼层级，比反复调样式更省时间。
