"CSS has 选择器：交互增强与性能边界"

概述`:has()` 允许选择包含特定子元素或后代的元素，常被称为“父选择器”。它为无 JS 的交互增强提供了新途径，例如当卡片内包含图片时应用不同样式，或有错误状态时高亮表单。用法示例.card:has(img) { border-color: var(--accent); } form:has(.error) { outline: 2px solid red; } ul:has(li.selected) { background: #f6f7f9; } 性能边界与建议关系匹配成本高，避免在大范围、深层 DOM 上无约束使用；限定作用域（如在组件根使用）。与容器查询协同：在组件根内局部使用 `:has()` 实现交互状态响应，减少全局选择器遍历。参考与验证［参考1］MDN 中文：`:has()` 选择器说明与示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has［参考2］MDN 英文：`:has()` 关系选择器与性能注意：https://developer.mozilla.org/en-US/docs/Web/CSS/:has关键词校验关键词与 `:has()` 选择器交互与性能一致。