h2 ~ p是正文段落统一加样式的最简解法，因它仅匹配同父容器内且DOM顺序在h2之后的p元素，精准作用于正文区域，避免误选侧边栏或页脚的p标签。
能，但必须严格满足「同父 + 顺序在前」两个硬条件，否则样式完全不生效。
h2 ~ p 为什么是正文段落统一加样式的最简解法
博客或文档类页面中，常需让每个 <h2> 后所有 <p> 段落缩进、加背景或调行高，但又不能影响其他区域（如侧边栏、页脚）的 <p>。用 h2 ~ p 正好命中这个场景：
- 它只匹配与
<h2>同一父容器内、且 DOM 顺序在其后的<p>，中间夹着<ul>或<blockquote>也不影响 - 不会误选
<h2>前面的<p>，也不会选中嵌套在<h2>内部的<p>（比如<h2><p>xxx</p></h2>） - 比
* ~ p安全得多——后者全局扫描，性能差，还极易干扰非正文区域
推荐写法：.article h2 ~ p，加父级限定，作用域清晰。
表单里用 input.error ~ .hint 而不是 input.error + .hint
校验失败后，一个输入框后面往往动态插入多个提示元素：<span class="error">、<small class="help-text">、<div class="validation-message">。此时 + 只能控制第一个，~ 才能一网打尽：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
input.error + .hint→ 只有第一个.hint显示，其余静默 - 正确写法：
input.error ~ .hint, input.error ~ .error, input.error ~ .help-text - 关键前提：所有提示元素和
input.error必须是同一父容器（如<div class="form-item">）的直系子元素 - HTML 中
input必须写在提示元素之前——哪怕 CSS 规则放在文件末尾也无效
button:hover ~ .detail 为什么比 JS 更轻量可靠
卡片式布局中，一个按钮悬停要同时控制后面多个内容块（比如 <div class="detail">），中间还隔着 <hr> 或图标，这时 + 会被阻断，而 ~ 不受干扰：
- 结构示例：
<button>展开</button><hr><div class="detail">...</div><div class="detail">...</div> - CSS：
button:hover ~ .detail { opacity: 1; } - 注意：
~只能向后匹配，无法实现「悬停右边元素 → 影响左边兄弟」；若需更复杂逻辑（如跨层级、逆序响应），得用:has()或加状态类 - 兼容性提醒：
:has()在 Safari 15.4+ 和 Chrome 105+ 支持，旧版仍需降级方案
写了 ~ 却没效果？先查这三件事
90% 的失效不是语法问题，而是 DOM 结构不达标：
- 用开发者工具右键检查目标元素，确认它的父节点是否和触发元素（如
input.error）完全一致；如果提示被 UI 库（如 Ant Design）插到<body>下，~直接失效 - 检查触发元素是否真实存在于 DOM 中——某些框架（Vue/React）在条件渲染为 false 时会移除节点，而非仅设
display: none - 警惕
display: contents容器：它会让子元素“脱离”正常兄弟关系，slot 投影内容也不算真实兄弟节点
结构一旦不满足「同父 + 顺序在前」，~ 就彻底退场，这时候强行调试选择器不如直接给父容器加状态类（如 .form-item--error）来得干脆。
