CSS has() 选择器在组件状态驱动与交互场景中的应用

CSS has() 选择器在组件状态驱动与交互场景中的应用概述`:has()` 提供根据后代或兄弟元素状态选择父元素的能力，可用于表单校验、展开/收起、卡片态切换等场景。核心概念与参数关系选择：`.field:has(input:invalid)` 根据子元素状态改变父元素样式。组合选择：`.tabs:has([aria-selected="true"])` 驱动父容器展示选中态。性能注意：复杂嵌套会产生代价，尽量在容器级控制。实践示例<label class="field"> <span>邮箱</span> <input type="email" required /> </label> <style> .field { display: grid; gap: .5rem; } .field:has(input:invalid) { outline: 2px solid #e11; } .field:has(input:focus) { outline-color: #06f; } </style> 验证方法浏览器支持：Chrome 105+、Safari 15.4+、Firefox 121+。测试环境：Windows 11 / macOS 14；Chrome 120+ / Safari 17+。性能指标：在表单密集页面中 `INP` 无显著劣化，样式计算保持可控。可访问性：配合 `:focus-visible` 与语义表单属性，确保键盘与读屏正常。注意事项避免在全局复杂结构上使用长链 `:has()`，倾向容器级。配合容器查询与状态属性（`aria-*`）实现更稳健的联动。在旧版浏览器提供渐进增强与回退样式。