CSS :has() 选择器：父级选择与交互状态治理实践

背景与价值传统 CSS 难以根据子元素状态影响父元素样式，常依赖 JS/类名切换。`:has()` 提供“父级选择器”能力，可简化交互样式与组件状态表达。基本模式.field:has(.error) { border-color: #e33; } .card:has(:hover) { box-shadow: 0 6px 16px rgba(0,0,0,.12); } .accordion:has(.item[aria-expanded="true"]) { border-top-color: #09f; } 表单与交互治理.form-row:has(input:focus) { outline: 2px solid #5b9df9; } .password:has(input[type="password"]:user-invalid) { color: #e33; } .btn-group:has(.btn.primary:disabled) { opacity: 0.6; pointer-events: none; } 组合选择与性能注意.list:has(.item.selected):has(.item:hover) { /* 组合状态 */ } /* 避免过度深度与广泛通配，控制评估成本 */ article:has(*:hover) { /* 慎用，会导致频繁重评估 */ } 与 @layer、容器查询协同@layer components { .card { transition: box-shadow .18s ease; } .card:has(.actions .btn:hover) { box-shadow: 0 8px 20px rgba(0,0,0,.16); } } 验证指标（Chrome 128/Edge 130）JS 参与度：交互样式中移除 JS/类名切换比例 ≥ 60%。性能：大列表中使用受控 `:has()` 的样式评估增加 ≤ 5%（P95）。稳定性：样式切换导致的布局跳动（CLS） ≤ 0.02（P95）。回退策略不支持 `:has()` 的环境：通过类名切换与更浅选择器实现关键效果；或构建时降级（PostCSS 插件有限）。测试清单典型交互：hover/focus/invalid 等状态的父级样式正确应用。极端列表：大量节点下样式评估稳定，无明显卡顿。应用场景表单行聚焦高亮、卡片悬浮联动、树状结构选中态向上影响、折叠面板激活态标示。