为何伪元素不能作为:has()伪类的参数？请举对应循环示例

注：伪元素通常被排除在:has()之外，因为其中许多伪元素的存在取决于其祖先元素的样式，允许查询它们会引入循环或循环查询问题。

假设CSS允许伪元素作为:has()的参数，我们来看下面这个会出问题的场景：

HTML代码 #

<div class="test-box">测试内容</div>

CSS代码（假设允许伪元素入参） #

/* 规则1：如果元素有::before伪元素，就给它添加红色背景 */
div:has(::before) {
  background-color: red;
}

/* 规则2：如果元素背景是红色，就显示::before伪元素 */
div[style*="background-color: red"] {
  position: relative;
}
div[style*="background-color: red"]::before {
  content: "伪元素内容";
  position: absolute;
  top: 0;
  left: 0;
}

问题分析 #

这里出现了典型的循环依赖死局：

• 浏览器要判断div.test-box是否符合:has(::before)的条件，就得先检查它有没有::before伪元素；
• 但::before伪元素是否能显示，又取决于这个div有没有红色背景；
• 而div的红色背景，又需要它满足:has(::before)的条件才能触发。

这种情况下，浏览器陷入了“先有鸡还是先有蛋”的循环，根本无法确定最终该渲染出什么样式——到底是显示红色背景加伪元素，还是都不显示？这就是规范里提到的循环查询问题，也是伪元素被排除在:has()参数之外的核心原因。

内容的提问来源于stack exchange，提问作者MicroMatrix