CSS :has() 选择器 无 JS 状态联动与交互实战

CSS :has() 选择器 无 JS 状态联动与交互实战概述`:has()` 允许根据后代或兄弟元素状态选择目标元素，实现如表单校验、手风琴展开等交互的样式驱动。核心概念与参数关系选择：如 `.card:has(.expanded)`、`form:has(:valid)` 等表达式。与状态伪类结合：`:checked`、`:invalid`、`:focus-within` 等。特性检测：`CSS.supports('selector(:has(*))')`。实践示例<style> .accordion input[type="checkbox"] { display: none; } .accordion label { cursor: pointer; display: block; padding: 8px 12px; background: #f6f6f6; } .accordion .panel { max-height: 0; overflow: hidden; transition: max-height 200ms ease; } .accordion:has(input:checked) .panel { max-height: 240px; } </style> <div class="accordion"> <label for="a">更多详情</label> <input id="a" type="checkbox" /> <div class="panel">内容...</div> </div> 验证方法交互一致性：在无 JS 环境下仍可通过纯 CSS 联动实现基本交互。性能：检查选择器复杂度对样式计算的影响，避免深度链影响性能。可访问性：保持控件语义与标签关联，确保键盘与读屏友好。注意事项避免在大量列表中使用高复杂度 `:has()` 造成样式计算成本上升。与脚本逻辑互补：复杂状态仍由 JS 管理，CSS 负责视觉表达。尊重用户减少动态偏好 `prefers-reduced-motion`。