FireFox 伪类 :has() 错误答案

【问题标题】：FireFox pseudo class :has() bugFireFox 伪类 :has() 错误
【发布时间】：2022-10-08 02:23:43
【问题描述】：

我在配置中将“layout.css.has-selector.enabled”设置为 true，但在 FireFox 中仍然无法正常工作。

:where(.wrapper){
  background-color: green;
}

:where(.wrapper:has(:first-child[onpointerdown*="append"])){
  background-color: purple;
}

.wrapper:has([data-_="1"]){
  background-color: blue;
}

[data-_="1"]{
  background-color: red;
}

<div class="wrapper">
  <div onpointerdown="this.parentElement.append(this.parentElement.firstElementChild)">Move</div>
  <div>Some text...</div>
  <div onpointerdown="this.dataset['_']=+!+this.dataset['_']">Change color</div>
</div>

【问题讨论】：

它是实验.你能指望什么？
一旦我将 layout.css.has-selector.enabled 设置为 true，它对我来说工作正常（Windows10 上的最新 FF）。你在什么操作系统上？
@AHaworth - 单击“更改颜色” div 时，当该 div 的背景为红色时，包装元素背景应为蓝色，而不是。这是:has() 的性能棘手位——重新计算变异DOM 文档元素的所有:has() 依赖元素的级联——所以FF 还没有完成它的实现也就不足为奇了。
“移动” div 结果也是如此。

标签： css firefox

【解决方案1】：

这确实是 Firefox 中的一个错误。有关详细信息，请参见评论 47（和前两条）：

您所看到的是与样式共享缓存的交互，我们尝试检测何时可以共享元素的样式。它没有考虑 :has，因此它错误地将第一个标签的样式与第二个标签共享。

如果 DOM 中的第一个元素与 :has() 规则匹配，它将起作用 - 但正如其他人所提到的......这是一个标志背后的原因。

【讨论】：