css传统上不支持从子元素直接选择父元素并应用样式。然而，借助现代css的`:has()`伪类，开发者现在可以实现这一需求。`:has()`允许根据其后代元素的存在来选择父元素，从而优雅地解决了从子元素条件性控制父元素样式的问题，极大地增强了css的灵活性和表达能力。
理解CSS的传统选择器限制
在CSS中，样式规则通常遵循从上到下、从父到子的层叠和继承机制。这意味着我们可以轻松地从父元素选择子元素，例如 .parent-class .child-class。然而，CSS标准设计之初并未提供一种直接的“父选择器”机制，使得从子元素反向选择并应用样式到其父元素变得不可能。
例如，考虑以下HTML结构和样式需求：
<div class="parent-class">
parent
<div class="some-other-class">
internal
<div class="child-class">
child
</div>
</div>
</div>我们希望当存在一个带有.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来看一个完整的例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用:has()从子元素控制父元素样式</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* 默认父元素样式 */
.parent-class {
width: 200px;
padding: 10px;
border: 2px solid blue;
margin-bottom: 20px;
background-color: #f0f8ff;
/* 默认高度，将被:has()覆盖 */
height: auto;
}
/* 默认子元素样式 */
.child-class {
width: 80px;
padding: 5px;
background-color: lightgreen;
border: 1px dashed green;
margin-top: 5px;
}
.some-other-class {
padding: 5px;
border: 1px dotted gray;
margin-top: 5px;
}
/* 核心解决方案：当父元素包含.child-class时，应用特定高度 */
.parent-class:has(.child-class) {
height: 100px; /* 应用更高的值以便观察效果 */
background-color: #fffacd; /* 改变背景色以示区分 */
border-color: red;
}
/* 没有.child-class的父元素 */
.parent-without-child {
width: 200px;
padding: 10px;
border: 2px solid purple;
background-color: #e6e6fa;
height: auto;
}
</style>
</head>
<body>
<h1>使用:has()从子元素控制父元素样式</h1>
<h2>包含`.child-class`的父元素</h2>
<div class="parent-class">
parent (包含子元素)
<div class="some-other-class">
internal div
<div class="child-class">
child div
</div>
</div>
</div>
<h2>不包含`.child-class`的父元素</h2>
<div class="parent-without-child">
parent (不包含子元素)
<p>这个父元素不会被`:has(.child-class)`选择。</p>
</div>
<h2>包含`.child-class`但类名不同的父元素</h2>
<div class="another-parent-class">
parent (包含子元素，但类名不同)
<div class="child-class">
child div
</div>
</div>
<style>
/* 针对另一个父元素，如果它也包含.child-class */
.another-parent-class:has(.child-class) {
height: 80px;
background-color: #ffefd5;
border: 2px solid orange;
margin-bottom: 20px;
width: 200px;
padding: 10px;
}
</style>
</body>
</html>在上述示例中，第一个.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): 选择直接包含<p>标签的div。
- li:has(+ li): 选择后面紧跟着另一个<li>的<li>。
- a:has(img): 选择包含图片的链接。 这些高级用法极大地扩展了CSS的表达能力，减少了对JavaScript的依赖。
总结
:has()伪类的引入，是CSS发展中的一个重要里程碑，它填补了CSS在反向选择器方面的空白。通过:has()，开发者现在可以优雅且纯CSS地实现基于子元素状态来控制父元素样式的需求，从而编写出更具声明性、更简洁、更易于维护的样式代码。掌握:has()将使你的CSS技能迈上一个新的台阶。
