css传统上不支持从子元素直接选择父元素并应用样式。然而，借助现代css的`:has()`伪类，开发者现在可以实现这一需求。`:has()`允许根据其后代元素的存在来选择父元素，从而优雅地解决了从子元素条件性控制父元素样式的问题，极大地增强了css的灵活性和表达能力。
理解CSS的传统选择器限制
在CSS中，样式规则通常遵循从上到下、从父到子的层叠和继承机制。这意味着我们可以轻松地从父元素选择子元素，例如 .parent-class .child-class。然而，CSS标准设计之初并未提供一种直接的“父选择器”机制，使得从子元素反向选择并应用样式到其父元素变得不可能。
例如，考虑以下HTML结构和样式需求：
parentinternalchild
我们希望当存在一个带有.child-class的子元素时，能够给其任意层级的父元素（这里是.parent-class）应用height: 10px的样式，并且不直接使用.parent-class的名称来定义这个特定的高度样式。在过去，这通常需要通过JavaScript来动态添加或移除类，或者改变HTML结构来满足。
引入现代解决方案：:has()伪类
随着CSS的发展，:has()伪类（又称“父选择器”或“关系选择器”）的出现彻底改变了这一局面。:has()伪类允许我们选择一个元素，前提是它内部包含了一个或多个符合特定选择器条件的后代元素。
立即学习“前端免费学习笔记（深入）”；
:has()伪类的工作原理
:has(selector)会匹配那些其内部包含至少一个与selector匹配的元素的元素。这里的selector可以是任何有效的相对选择器，包括类选择器、ID选择器、元素选择器、伪类等。
应用:has()解决问题
为了实现从子元素（.child-class）反向控制父元素（.parent-class）的样式，我们可以这样使用:has()：
.parent-class:has(.child-class) {
height: 10px;
}这条CSS规则的含义是：“选择所有具有.parent-class类，并且其内部（任意层级）包含一个具有.child-class类的元素的父元素，然后给这些被选中的父元素应用height: 10px的样式。”
完整示例代码
为了更好地演示其效果，我们结合HTML和CSS来看一个完整的例子。
使用:has()从子元素控制父元素样式
使用:has()从子元素控制父元素样式
包含`.child-class`的父元素
parent (包含子元素)
internal div
child div
不包含`.child-class`的父元素
parent (不包含子元素)
这个父元素不会被`:has(.child-class)`选择。
包含`.child-class`但类名不同的父元素
parent (包含子元素，但类名不同)
child div
在上述示例中，第一个.parent-class会因为其内部包含.child-class而被:has(.child-class)选中，从而应用height: 100px和不同的背景色。而第二个.parent-without-child则不会被选中，因为它不包含.child-class。第三个another-parent-class虽然类名不同，但由于其内部也包含.child-class，因此也会被对应的:has()规则选中并应用样式。
注意事项与兼容性
- 浏览器兼容性： :has()伪类是相对较新的CSS特性。在编写本文时，它已在主流现代浏览器（如Chrome, Firefox, Safari, Edge）中得到了广泛支持。但在生产环境中使用前，务必检查目标用户群体的浏览器兼容性（可查阅 caniuse.com）。对于不支持的浏览器，可能需要提供备用方案或接受降级。
- 性能考量： 尽管:has()功能强大，但过于复杂或嵌套层级很深的:has()选择器可能会对渲染性能产生轻微影响。在大多数常见用例中，这种影响通常可以忽略不计，但在性能敏感的应用中仍需注意。
-
不仅仅是父选择器： :has()的用途远不止于简单的父选择。它实际上是一个“关系选择器”，可以用来选择一个元素，如果它满足特定的内部条件，例如：
- div:has(> p): 选择直接包含
标签的div。
- li:has(+ li): 选择后面紧跟着另一个
- 的
- 。
- a:has(img): 选择包含图片的链接。 这些高级用法极大地扩展了CSS的表达能力，减少了对JavaScript的依赖。
- div:has(> p): 选择直接包含
总结
:has()伪类的引入，是CSS发展中的一个重要里程碑，它填补了CSS在反向选择器方面的空白。通过:has()，开发者现在可以优雅且纯CSS地实现基于子元素状态来控制父元素样式的需求，从而编写出更具声明性、更简洁、更易于维护的样式代码。掌握:has()将使你的CSS技能迈上一个新的台阶。
