CSS has() 选择器父子关系与状态驱动样式实践

CSS :has() 选择器父子关系与状态驱动样式实践概述`:has()` 提供关系伪类能力，可根据后代或相邻元素状态匹配父元素或前置兄弟，解决以往仅能向下选取的限制。核心概念与参数`A:has(B)`：当 A 的后代或相邻满足 B 时选中 A。性能约束：`:has()` 可能触发较广的子树遍历，应约束匹配范围与节点数量。实践示例/* 表单校验：含 .error 的字段容器高亮 */ .field:has(.error) { border-color: #e11d48; } /* 手风琴：父项含 .open 时展开内容 */ .accordion-item:has(.open) .content { max-height: 20rem; } /* 标题紧跟副标题时缩小间距 */ h1:has(+ h2) { margin-bottom: 0.25em; } 验证方法规范与支持：参考 MDN“:has()”与 Can I Use 支持表，验证在 Chromium / Safari / Firefox 最新版本支持情况（Chromium 106+、Safari 15.5+、Firefox 122+）。性能：在动态更新场景（如列表增删）观测样式重计算成本，收敛选择器范围。可访问性：与 `:focus-visible`、`[aria-*]` 协作验证键盘/读屏行为一致。注意事项避免在大量根节点上使用宽泛的 `:has()` 选择器，优先限定作用域。组合选择时优先使用类约束，如 `.item:has(.active)`，降低遍历成本。为不支持浏览器提供兜底类或 JS 切换类名的替代方案。参考：MDN（:has()），Can I Use（:has）。