深入理解CSS选择器：向上遍历的局限与:has()的崛起

css选择器遵循从上到下的级联与遍历规则，传统上无法实现类似数学中的括号来影响操作顺序，也无法向上遍历dom树。这意味着无法直接基于子元素的状态来选择其父元素或父元素的兄弟元素。然而，新兴的`:has()`伪类正在改变这一现状，它允许开发者根据子元素的存在或状态来选择父元素或祖先元素，从而间接实现更复杂的条件选择，极大地扩展了css的表达能力，尽管其浏览器兼容性仍在发展中。

CSS选择器的工作原理与传统限制

CSS，全称“层叠样式表”（Cascading Style Sheets），其核心机制之一便是“层叠”与“向下遍历”。这意味着CSS选择器总是从父元素开始，向下查找其子元素、孙元素或同级元素。这种设计原则决定了CSS选择器无法像数学表达式那样，通过括号来改变操作的优先级或逻辑分组。

例如，在数学中，我们可以使用 (A + B) * C 来明确计算顺序。但在CSS中，类似 ( .wrapper > input:not(:blank) ) + .placeholder 这样的语法是无效的。CSS没有提供这种“分组”或“向上遍历”的能力。这意味着，我们无法直接根据一个子元素（如.wrapper内的input）的状态来选择其父元素（.wrapper）的兄弟元素（.placeholder）。

传统的CSS选择器只能沿着DOM树向下或横向（兄弟选择器）移动：

• 后代选择器 (` `): 选择某个元素的后代。
• 子选择器 (>): 选择某个元素的直接子元素。
• 相邻兄弟选择器 (+): 选择紧邻在某个元素后面的兄弟元素。
• 通用兄弟选择器 (~): 选择某个元素之后的所有兄弟元素。

在上述例子中，我们希望当.wrapper内部的input元素不为空时，改变.wrapper的相邻兄弟元素.placeholder的样式。由于CSS无法“向上”从input遍历到.wrapper，再“向下”或“横向”选择.placeholder，这种需求在没有:has()伪类的情况下是无法通过纯CSS实现的。

立即学习“前端免费学习笔记（深入）”；

以下是原始示例代码及其无法工作的根本原因：

HTML 结构：

<div class="wrapper">
  <input type="text" required>
</div>
<div class="placeholder"></div>

无效的CSS尝试：

/* 这种语法在CSS中是无效的，因为CSS不支持分组和向上遍历 */
/* ( .wrapper > input:not(:blank) ) + .placeholder {
    background-color: green;
} */

.placeholder {
    width: 200px;
    height: 50px;
    background-color: red;
    margin-top: 20px;
}

问题在于，CSS引擎在解析选择器时，无法理解 ( ... ) 这种分组语法，并且无法从 input 元素逆向回溯到其父级 .wrapper，再从 .wrapper 寻找其兄弟元素 .placeholder。

揭秘:has()伪类：CSS的新能力

随着CSS规范的发展，:has()伪类（也常被称为“父选择器”或“祖先选择器”）的引入，正在逐步解决传统CSS选择器无法向上遍历的局限性。:has()伪类允许我们根据一个元素是否包含（或是否具有某个特定的）子元素、孙元素甚至兄弟元素来选择该元素本身。

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

:has()伪类的语法：

selector:has(relative-selector) {
  /* styles */
}

其中，selector 是你想要选择的元素，而 relative-selector 是一个相对选择器列表，用于检查 selector 内部或相对于 selector 的条件。

如何使用:has()解决上述问题： 利用:has()，我们可以首先检查.wrapper是否包含一个非空的input子元素，如果条件满足，则选择这个.wrapper元素，然后通过相邻兄弟选择器+来选择.placeholder。

示例代码：

<div class="wrapper">
  <input type="text" required>
</div>
<div class="placeholder"></div>

/* 基础样式 */
.placeholder {
    width: 200px;
    height: 50px;
    background-color: red;
    margin-top: 20px;
}

/* 使用 :has() 实现条件样式 */
/* 当 .wrapper 包含一个非空的直接子 input 时，选择 .wrapper 的相邻兄弟 .placeholder */
.wrapper:has(> input:not(:blank)) + .placeholder {
    background-color: green;
}

代码解释：

1. .wrapper:has(> input:not(:blank)): 这部分选择器首先定位到.wrapper元素。:has(> input:not(:blank)) 是一个条件检查，它会判断当前.wrapper元素是否包含一个直接子元素input，并且这个input元素的状态不是:blank（即有内容）。如果这个条件成立，那么.wrapper元素就会被选中。
2. + .placeholder: 在.wrapper被选中之后，+ .placeholder选择器会进一步选择紧邻在被选中的.wrapper元素后面的兄弟元素.placeholder。

通过这种方式，:has()伪类有效地弥补了传统CSS选择器无法向上遍历的不足，使得我们能够基于子元素的状态来影响父元素或父元素兄弟元素的样式，从而实现更加灵活和强大的UI控制。

:has()的浏览器兼容性与注意事项

尽管:has()伪类带来了革命性的功能，但截至目前，其浏览器兼容性仍在不断完善中。主流浏览器如Chrome、Firefox、Safari等已逐步支持或正在积极实现对:has()的支持，但仍有部分旧版浏览器或特定环境可能不支持。

注意事项：

• 兼容性检查： 在生产环境中使用:has()之前，务必通过 caniuse.com 等工具检查目标用户群体的浏览器兼容性。
• 渐进增强： 考虑到兼容性问题，建议采用渐进增强的策略。即，先提供一个所有浏览器都能显示的基础样式，然后使用:has()来添加额外的、更丰富的样式。如果浏览器不支持:has()，则用户只会看到基础样式，而不会破坏布局。
• 性能考量： 理论上，复杂的:has()选择器可能会对渲染性能产生一定影响，因为它需要浏览器进行更多的DOM遍历和条件判断。但在大多数常见用例中，这种性能开销通常是微不足道的。不过，在使用非常复杂或嵌套的:has()时，仍需留意其对性能的潜在影响。

总结

CSS选择器在设计之初，便遵循了从上到下的级联与遍历原则，导致其无法实现类似数学中的括号来影响操作优先级，也无法直接进行向上遍历DOM树的操作。这在很长一段时间内限制了CSS在处理复杂条件选择方面的能力。然而，:has()伪类的出现正在逐步打破这些限制，它赋予了CSS选择器“感知”其内部或周围元素状态的能力，从而能够实现基于子元素状态的父元素选择，或更复杂的兄弟元素条件选择。

掌握:has()伪类，无疑将极大地扩展CSS的表达能力，减少对JavaScript的依赖，使前端开发人员能够构建更纯粹、更高效的CSS驱动的交互效果。随着浏览器兼容性的日益完善，:has()必将成为现代CSS开发中不可或缺的强大工具。

以上就是深入理解CSS选择器：向上遍历的局限与:has()的崛起的详细内容，更多请关注php中文网其它相关文章！