该用 ~ 而不是 + 时，是需影响目标元素后所有同级兄弟而非仅第一个；如表单中 input.error 后多个提示元素需统一响应，~ 可匹配所有后续同级 .error 等，前提是它们同父且顺序在后。
什么时候该用 ~ 而不是 +
当你需要影响「目标元素之后所有同级兄弟」，而不是只第一个时，就该用 ~。比如表单里一个 input.error 后面可能动态插入 span.error、small.help-text、甚至 div.suggestion，用 + 只能控制第一个，后面全漏掉。
-
input.error + .error→ 只匹配紧挨着的那个.error -
input.error ~ .error→ 匹配它后面所有同级的.error（不管中间有没有div或文本节点） - 关键前提：它们必须在同一个父容器里，且
input.error在 DOM 中出现在这些提示元素之前
表单校验提示统一控制怎么写
不用 JS 绑定、不给每个提示加 class，靠纯 CSS 批量响应状态变化。常见模式是：输入框加 .error 类后，自动激活后续所有提示类。
input.error ~ .error,
input.error ~ small.help-text,
input.error ~ [role="alert"] {
color: #d32f2f;
display: block;
margin-top: 4px;
}
- 注意：如果提示元素被插到全局弹窗或 body 底部，就脱离了同级关系，
~完全失效，得换方案（如用[data-error-target]配合 JS） - 推荐把表单域包在
<div class="form-group">里，用.form-group input.error ~ *限定作用域，避免样式污染
radio 切换内容面板能不用 JS 吗
能，且很稳——只要保证所有 input[type="radio"] 和对应 .panel 是同级、同父、radio 在前。
#tab1:checked ~ .panel[data-tab="1"],
#tab2:checked ~ .panel[data-tab="2"] {
display: block;
}
.panel {
display: none;
}
- DOM 必须是：
<input id="tab1" type="radio"><div class="panel" data-tab="1">…</div><div class="panel" data-tab="2">…</div> - 不能把 panel 套进其他 div 里，否则就不是兄弟了；也不能把 radio 放在 panel 后面
- 这个技巧对 SEO 和无障碍友好，比 JS 切换更可靠
为什么 div4 文字变红了但没被选中
因为 div ~ div { color: red; } 确实只选中了 div3（它是 div2 的后续同级兄弟），而 color 是可继承属性，所以 div4、div5 是“被继承红”，不是“被选择器选中”。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：加个非继承属性，比如
border: 2px solid blue，你会发现只有div3有边框 - 想精准控制后代，得用后代选择器，比如
div3 div { color: red; }，或者用all: unset阻断继承 - 别指望
~跨层级匹配——它只看“同级+顺序靠后”，不看嵌套深浅
