:has() 是父容器响应子元素 disabled 状态的唯一纯 CSS 方案，需写为 .parent:has(...)，支持现代浏览器，但需注意兼容性、Shadow DOM 限制及 JS 状态同步。
父容器需要响应子元素 disabled 状态时，:has() 是唯一纯 CSS 解决方案
现代浏览器（Chrome 105+、Safari 15.4+、Firefox 103+）已原生支持 :has()，它让父级样式能“向上感知”子元素状态。比如表单中某个 <input disabled> 出现时，希望整个 .form-group 变灰且不可交互——过去只能靠 JS 切 class，现在可以直接用 CSS 实现。
关键点在于：:has() 必须写在父选择器之后，且不能用于伪类链开头（即不能写 :has(...) .parent），必须是 .parent:has(...)。
- 只支持单向“存在性”判断，不触发重排，性能比 JS 监听
disabled属性变更更轻量 - 无法匹配
display: none或未渲染的子元素（DOM 必须存在且可遍历） - 不支持在
@keyframes或媒体查询中嵌套使用 - 若子元素是自定义 Web Component 且用了 Shadow DOM，默认无法穿透，需显式暴露
:host(:disabled)等接口
:has() 匹配 disabled input 的正确写法和常见错误
直接写 .form-group:has(input:disabled) 看似合理，但容易漏掉三类情况：原生 <button disabled></button>、<select disabled></select>，以及通过 [disabled] 属性设置但未被解析为“真正 disabled”的元素（如某些框架动态加属性却未触发表单控件状态更新）。
- 推荐写法：
.form-group:has(input:disabled, button:disabled, select:disabled, textarea:disabled)—— 覆盖所有常见表单控件 - 避免写
.form-group:has([disabled])：这会误命中<div disabled> 这类非法用法，且不保证控件实际处于禁用逻辑态<li>若子元素是封装后的组件（如 <code><my-input></my-input>），需确保其内部真实<input>暴露了:disabled状态，或组件自身定义了:host(:disabled) - Safari 对
:has()中多个选择器的逗号分隔支持稍晚（16.4+ 才完全稳定），生产环境建议用 Babel + PostCSS 插件做兼容降级兜底
禁用父容器交互需配合 pointer-events 和 opacity
仅靠 :has() 改变颜色或边框，并不会阻止用户点击或聚焦子元素。要真正“禁用父容器”，必须叠加交互控制。
立即学习“前端免费学习笔记（深入）”；
`.form-group:has(input:disabled, button:disabled) {
opacity: 0.6;
pointer-events: none;
}
<p>.form-group:has(input:disabled, button:disabled) * {
pointer-events: none;
}`注意：pointer-events: none 会阻止所有鼠标事件，包括 title 提示和 ::before/::after 的 hover 效果；如果父容器内有非表单内容（如帮助文字）仍需可选中，就不能对整个父级设 pointer-events: none，而应只针对控件区域做隔离。
-
pointer-events: none不影响键盘焦点，若子input已disabled，它本就不能获得焦点，这点无需额外处理 - 不要用
visibility: hidden或display: none替代，否则:has()将失效（子元素不可见时无法被匹配） - 若父容器本身是
<label></label>，需额外测试点击是否仍会触发关联控件——pointer-events: none会阻断该行为
与 JavaScript 状态同步仍是必要补充
:has() 只响应 DOM 属性变化，对 React/Vue 等框架中“逻辑 disabled”但未同步到真实 disabled 属性的情况无能为力。例如 Vue 的 v-bind:disabled="isPending" 若绑定的是响应式数据，但渲染时没生成 disabled 属性（比如条件未满足），:has() 就不会触发。
- 确保框架最终输出的 HTML 包含真实
disabled属性，而不是仅靠 class 或 aria-disabled 控制 - 对动态表单，可在 JS 中显式调用
element.toggleAttribute('disabled', shouldDisable)来驱动:has() - 服务端渲染（SSR）页面首次加载时，若初始状态含
disabled，:has()能立即生效；但 hydration 后状态变化若没反映到属性上，样式就会滞后
最易被忽略的一点：当父容器本身也带 disabled 属性（如 <fieldset disabled></fieldset>）时，:has() 无法检测该属性——因为 fieldset 的 disabled 是作用于后代的，不是自身状态，此时必须换用 JS 监听或改用 fieldset:disabled 直接选中自己。
