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

# 背景与价值 - 传统 CSS 难以根据子元素状态影响父元素样式，常依赖 JS/类名切换。 - `:has()` 提供“父级选择器”能力，可简化交互样式与组件状态表达。 # 基本模式 ```css .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; } ``` # 表单与交互治理 ```css .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; } ``` # 组合选择与性能注意 ```css .list:has(.item.selected):has(.item:hover) { /* 组合状态 */ } /* 避免过度深度与广泛通配，控制评估成本 */ article:has(*:hover) { /* 慎用，会导致频繁重评估 */ } ``` # 与 @layer、容器查询协同 ```css @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 等状态的父级样式正确应用。 - 极端列表：大量节点下样式评估稳定，无明显卡顿。 # 应用场景 - 表单行聚焦高亮、卡片悬浮联动、树状结构选中态向上影响、折叠面板激活态标示。