CSS has() 交互状态管理与性能优化实践

概览`:has()` 允许父元素根据子元素状态变化选择并应用样式，简化交互联动。合理使用可减少 JS 与复杂选择器，但需关注性能与可维护性。基础联动.field:has(input:focus-visible) { border-color: oklch(70% 0.12 250); } .card:has(img[src]) { background: oklch(98% 0.02 250); } 表单错误态.field:has(.error) { border-color: oklch(60% 0.15 30); } .field:has(input[aria-invalid="true"]) .hint { color: oklch(40% 0.12 30); } 导航与展开.nav:has(.item[aria-current="page"]) { box-shadow: inset 0 -2px currentColor; } .accordion:has([open]) { border-color: oklch(80% 0.06 250); } 性能与治理优先使用类与属性状态，减少昂贵结构匹配。控制 :has() 作用范围，避免全局根匹配。与 `@scope`、`@layer` 配合，提升隔离与可维护性。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+交互样式联动简化，性能稳定，样式耦合低