:has() 仅选中父/同级元素且不触发重排；form:has(:invalid) 按钮无反应因校验属性缺失、验证未触发或选择器覆盖不全；跨层级需向上找共同祖先再向下选；父容器样式“失效”常因层叠上下文或 display: contents 导致；视觉禁用不等于功能禁用，须配合 disabled 属性。
:has() 能直接响应子元素状态，但必须明确它只选中父/同级元素，不改变 DOM 或触发重排——用错位置就完全失效。
form:has(:invalid) 为什么按钮样式没变？
常见现象是写了 form:has(input:invalid) button，但用户输错邮箱后按钮颜色毫无反应。原因有三个：
- 表单字段没启用原生校验：
input缺少required、type="email"等约束属性，:invalid根本不会被激活 - 浏览器未触发表单验证：用户没 blur、没 submit，Chrome/Safari 不会自动标记
:invalid（Firefox 更严格） - 选择器漏掉了其他表单控件：
select、textarea、input[type="number"]同样可能 invalid，但你只写了input:invalid
正确写法应统一覆盖：form:has(:is(input:invalid, select:invalid, textarea:invalid)) button；若用 JS 主动加 .error 类，则必须改用 form:has(.error)。
:has() 控制非相邻元素时，为什么 nav input:checked + main 不生效？
因为 + 是相邻兄弟选择器，要求两个元素在 DOM 中紧挨着。而 nav input 和 main 之间隔着 ul、header 等多层结构，物理上根本不相邻。
立即学习“前端免费学习笔记（深入）”；
真正能跨层级联动的写法是向上找共同祖先，再向下或向后选目标：
- 用
header:has(nav input:checked) + main：匹配header是否包含已勾选的input，再选它后面紧邻的main - 若
main不是header的直接后续兄弟，可改用body:has(nav input:checked) main（前提是main是body直接子元素） - 避免嵌套
:has()，如header:has(nav:has(input:checked))—— Safari 15.4–16.x 会静默忽略整条规则
给父容器加背景色或边框，:has() 为啥看起来“没反应”？
不是没生效，而是浏览器布局已完成，父容器尺寸固定，新样式被子元素遮盖或未参与层叠上下文计算。
实操建议：
- 加
position: relative显式创建层叠上下文，确保background或border正常绘制 - 慎用
display: contents：它会让父容器“消失”于盒模型，background无效，仅适合纯样式透传场景 - 若需动态撑开高度（比如内容出错时显示提示栏），别依赖
:has()驱动尺寸变化，改用 JS 监听后手动加.has-error类并设min-height或padding
最易被忽略的一点：:has() 不会阻止用户交互。哪怕按钮视觉上变灰了，click 和 Enter 仍能触发提交——禁用逻辑必须由 checkValidity() + disabled 属性双保障。
