---

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

keywords:

• :has
• 关系选择器
• 交互增强
• 性能
• 子选择器
• 父选择器

description: 解释 CSS :has() 的关系选择能力（父选择器效果），展示交互增强用例（如有子元素时样式变化），并给出性能边界与工程建议。

categories:

• 文章资讯
• 编程技术

---

概述

: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() 选择器交互与性能一致。