:has()仅适用于结构静态、状态确定的表单联动，如.required/.invalid/.checked等存在性检测；无法响应用户输入导致的value变化或实时校验，此类场景必须依赖JavaScript。
能，但只限于「结构确定、状态静态、响应简单」的联动场景；一旦涉及实时值判断、跨父级影响或用户输入后动态反馈，:has() 就会失效，必须回退到 JavaScript。
哪些表单联动可以用 :has() 安全替代
它适合响应那些由 HTML 结构或初始属性决定、且不随用户输入频繁变化的状态：
-
:has(input:required)→ 给必填项的label加星号：label:has(+input:required)::before { content: "*"; color: red; } -
:has(input:invalid)→ 高亮整个表单项容器：.form-group:has(input:invalid) { border-color: #f44336; } -
:has(input:checked)→ 控制兄弟按钮启用状态：fieldset:has(input:checked) .submit-btn { opacity: 1; pointer-events: auto; } -
:has(.field-validation-error)→ ASP.NET MVC 等服务端注入的校验提示存在时触发样式
哪些看似能用、实际踩坑的写法
这些是开发者最容易误以为 :has() 能处理，但浏览器根本不响应的典型场景：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
-
input[value=""]：只匹配 HTML 中显式写了value=""的元素，用户清空输入框后样式不会更新 -
:has(input:not(:placeholder-shown))：在无placeholder的input[type="number"]上 Firefox 可能不触发；且删除全部内容后:placeholder-shown重新激活，视觉与逻辑错位 -
:has(input:focus)：焦点切换极快，样式可能闪动或不同步；:focus在:has()中虽被支持，但语义不稳定 -
:has(input:checked:focus)：伪类链式调用（如:checked:focus）在所有浏览器中均无效，整条规则被静默丢弃
为什么不能依赖 :has() 做“输入即反馈”
:has() 是存在性检测器，不是监听器。它只在 DOM 渲染完成或结构变更（如节点增删）时重新计算，不响应 input.value 属性变化、不监听事件、不感知 JS 修改后的状态。
立即学习“Java免费学习笔记（深入）”；
- 用户输入文字 →
input.value改变，但input的属性（valueattribute）未变 →:has(input[value="xxx"])不匹配 - JS 执行
el.checked = true→ DOM 节点状态变了，但部分旧版 Firefox（120 及更早）需手动开启layout.css.has-selector.enabled才能识别 -
:has()规则若含非法选择器（如::before或:hover），整条 CSS 规则会被浏览器直接忽略，DevTools 中也查不到痕迹
真正需要「输入过程中实时反馈」（比如密码强度提示、邮箱格式校验、字数计数）的地方，:has() 无法覆盖；它的价值在于把一部分原本必须用 JS 注入 class 的静态状态判断，交还给 CSS 引擎——省掉几行 JS，但别指望它接管整个表单逻辑。
