CSS has() 关系选择器与组件状态驱动实践

CSS has() 关系选择器与组件状态驱动实践概述`has()` 允许选择“包含特定子/后代/兄弟元素”的父级，从而以纯 CSS 实现状态驱动的样式切换，简化 JS 参与与降低耦合。核心概念与参数父级匹配：如 `.field:has(input:invalid)` 用于表单校验态样式。兄弟关系：`.tabs:has(.tab.active)` 让容器根据活动项切换布局或阴影。性能建议：限制复杂嵌套与大范围匹配；将 `:has()` 放在较具体的上下文中。实践示例<style> .field { display: grid; gap: 8px; } .field:has(input:invalid) { outline: 2px solid #ef4444; } .field:has(input:focus) label { color: #4f46e5; } .card-list { display: grid; gap: 12px; } .card-list:has(.card.featured) { border-top: 2px solid #06b6d4; padding-top: 8px; } </style> <div class="field"> <label for="email">邮箱</label> <input id="email" type="email" required> </div> <div class="card-list"> <article class="card">普通卡片</article> <article class="card featured">加亮卡片</article> </div> 验证方法浏览器支持：Chrome 105+、Safari 15.4+、Firefox 121+。性能评估：在 DevTools Performance 中观察样式计算与布局；避免大范围通配选择。兼容退化：不支持时保持基础样式，必要交互通过少量 JS 补充。注意事项避免与复杂后代选择器组合导致选择器树过深。将状态限制在组件容器范围，减少全局影响与计算成本。与 `:focus-visible`、表单伪类配合提升可访问性与可用性。