应使用input.error ~ .hint而非input.error + .hint，因为~可匹配同一父容器内input.error之后所有同级.hint元素，而+仅匹配紧邻的下一个，避免漏掉多个动态插入的提示元素。
表单错误提示批量显示时怎么避免漏掉元素
用 input.error ~ .hint 而不是 input.error + .hint，因为表单校验后常插入多个提示元素（如 span.error、small.help-text、div.validation-message），+ 只能命中第一个，~ 才能一并控制所有后续同级提示。
常见错误现象：只看到第一个提示变红，其余仍隐藏或样式未生效。
- 必须确保所有提示元素和
input.error在同一父容器内（比如都包在<div class="form-item"> 里）<li>HTML 中 <code>input.error必须写在提示元素之前——哪怕 CSS 规则写在后面也无效 - 若 UI 库把提示渲染到
下（如 Ant Design 的message或Tooltip），~完全失效，得改用[data-status="error"] .hint这类属性选择器 - 不要写成
* ~ p—— 全局匹配性能差，且极易误选 - 加父级限定更安全：
.article h2 ~ p，既缩小作用域，又避免干扰侧边栏或页脚的p - 注意：如果某个
p出现在h2前面，或嵌套在h2内部（如<h2></h2> <p>xxx</p>），它不会被选中 - 必须保证所有目标元素（如多个
.detail）和button同级，且都在其后 - 不能用于「悬停右边元素 → 影响左边兄弟」，CSS 选择器无法逆序匹配
- 复杂交互建议搭配
:has()（如.card:has(button:hover) .detail），但需注意 Safari 15.4+ 和 Chrome 105+ 才支持 - 检查是否跨父级：比如
input在<div class="field"> 里，而 <code>.hint被插到底下——这时~失效 - 检查是否伪元素干扰：
display: contents容器里的子元素不算真实兄弟，slot投影内容也不参与~匹配 - 检查是否用了动态插入但未触发重绘：JS 插入新提示元素后，若父容器未重排，部分旧浏览器可能不重新计算
~规则
文章排版中标题后所有段落统一加样式怎么写才不误伤
h2 ~ p 是最简方案，它只影响与 h2 同父、且 DOM 顺序在其后的 p，不会波及其他区域的段落。
典型场景：博客正文里每个 <h2></h2> 下可能跟 <p></p>、<ul></ul>、<blockquote></blockquote>，再跟几个 <p></p>，你只想给这些 p 加背景或缩进。
悬停触发多个兄弟元素样式变化时为什么 ~ 比 + 更可靠
当需要「一个按钮悬停 → 后面多个文本块同时变色+显隐」时，button:hover ~ .detail 是唯一纯 CSS 解法；+ 只能控制紧邻的一个，无法覆盖中间夹着图标、分割线等元素的情况。
例如卡片结构：<button>展开</button><hr>
<div class="detail">...</div>
<div class="detail">...</div>，+ 会被 <hr> 阻断，而 ~ 不受干扰。
为什么有时写了 ~ 却完全没效果
90% 的问题不是语法错，而是 DOM 结构不满足「同父 + 顺序靠后」这个硬条件。
真正难处理的，是那些看似同级、实则被 Shadow DOM 或框架渲染逻辑隔离的结构——这时候别硬套 ~，直接上 class 控制更实在。
