使用 :has() 选择器可以直接在 css 中实现基于子元素或兄弟元素的样式判断，无需 javascript。核心做法是选中父容器并附加 :has(条件) 伪类，例如 .card:has(.active) 会在卡片内存在激活状态子元素时应用样式。这解决了传统 css 无法向上查询的痛点，让条件样式变得声明式且高效。
:has() 如何匹配包含特定子元素的父级
当需要检测父级是否包含某个特定结构的子元素时，直接使用后代选择器组合即可。例如，如果希望当一个按钮被禁用时，其所在的整个表单组显示灰色调，可以编写 .form-group:has(button:disabled)。浏览器会遍历 DOM，找到所有包含禁用按钮的 .form-group 并应用样式。这种方法比给每个子元素添加类名更简洁，因为它直接描述了“拥有”关系。
.form-group {
background: white;
transition: opacity 0.3s;
}
/* 当 .form-group 内部包含任何被禁用的 button 时 */
.form-group:has(button:disabled) {
opacity: 0.5;
background: #f0f0f0;
}
上述代码中，.form-group 是目标父级，:has(button:disabled) 是条件。只要组内任意一个 具有 disabled 属性，整个组的样式就会改变。这种匹配不关心子元素的位置深度，只要是后代即可。
利用 :has() 处理兄弟元素间的条件样式
除了父子关系，:has() 还能通过 > 或空格选择器处理兄弟节点的条件样式。常见场景是：当输入框获得焦点时，高亮其上方的标签。虽然 focus-within 也能做到，但 :has() 允许更复杂的逻辑，比如检查兄弟元素的内容或状态。例如，当复选框被选中时，改变其旁边说明文字的样式，可以使用 .label-text:has(+ input:checked) 的反向思维，或者更准确地说是选中父级后调整兄弟样式。更直接的用法是：input[type="checkbox"]:checked ~ .description 是传统写法，但若要用 :has() 从描述文本反向控制，通常还是配合父级。这里展示一个典型用例：当列表项中的图片加载失败时，隐藏该图片并调整文字位置。我们可以选中包含图片的列表项，若图片不可见（通过 :not(:placeholder-shown) 或 JS 辅助类，但在纯 CSS 中常用 :has(img[src]) 结合其他状态）。更纯粹的 CSS 方案是：当单选按钮被选中时，改变其兄弟标签的颜色。使用 label:has(+ input:checked) 是不对的，因为 :has() 是向前看。正确的兄弟选择是 input:checked + label。但如果我们要根据兄弟元素的状态改变当前元素，例如：当 div 内有 span.error 时，改变 div 的边框。这就是父子/后代关系的延伸。让我们看一个真正的兄弟场景：当 header 中有 nav 展开时，改变 header 的背景。这依然是后代。真正的兄弟条件是：A:has(~ B.condition)。例如，当 div 后面跟着一个 footer 且 footer 有特定类时，改变 div 的底部边距。代码示例如下：
.container:has(~ .footer.promo) {
padding-bottom: 40px;
}
.footer.promo {
background: yellow;
}
在这个例子中，.container 检查其后紧跟的兄弟元素 .footer 是否具有 .promo 类。如果有，.container 增加底部内边距以容纳促销信息。这展示了 :has() 在水平方向上的查询能力，弥补了传统 CSS 只能向下或向右（通过相邻兄弟选择器）的局限。
当 :has() 选择器不被支持时的降级策略
尽管现代浏览器已广泛支持 :has()，但在某些旧环境或严格的安全策略下可能仍不可用。此时，可以通过 JavaScript 检测支持情况并提供降级方案。基本思路是使用 CSS.supports('selector(:has(*))') 进行检查。如果不支持，则通过 JS 动态添加一个类名到父级，从而触发传统的 CSS 规则。例如，在页面加载时遍历所有需要条件样式的容器，检查其内部是否符合条件，若符合则添加 .js-has-active 类。这样，CSS 可以回退到 .js-has-active .child 的选择器模式。虽然增加了 JS 开销，但保证了功能的可用性。另一种纯 CSS 的近似方法是使用 flexbox 或 grid 的布局特性结合 order 或可见性属性，但这通常只能模拟视觉效果，无法完全替代逻辑上的条件样式。对于关键业务逻辑，建议优先确保 :has() 的支持率，或使用 PostCSS 插件进行自动降级处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
