该用 ~ 而不是 + 时，是需影响目标元素后所有同级兄弟而非仅第一个；如表单中 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） - 推荐把表单域包在 里，用
.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 必须是：……
- 不能把 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阻断继承 - 别指望
~跨层级匹配——它只看“同级+顺序靠后”，不看嵌套深浅
- DOM 必须是：
