如何在 Firefox 上启用 :has() 选择器

Question

当我在

caniuse.com

上检查 :has() CSS 选择器时，它告诉我从 Firefox103 开始

在 Firefox 中通过layout.css.has-selector.enabled 支持 旗帜。

那么我如何找到这个标志并启用它？

Answer 1

前往 Firefox

about:config

页面，然后搜索并切换

layout.css.has-selector.enabled

。

Answer 2

我知道这有点题外话，但评论中的一些用户对我的说法提出质疑

:has(:hover div>a[href])

。这是一个例子。

这可以演示如何在没有 JavaScript 的情况下使用

:has

，还可以演示 Firefox 仅部分支持

:has

和

layout.css.has-selector.enabled

。这是在 Firefox 118 中测试的。

.bc {
  width: 80vw;
  height: 80vh;
  padding: 8px;
  background-color: blue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.sc {
  width: 80px;
  height: 80px;
  background: #87ff9d;
  border: 1px solid black;
  margin: 4px;
  padding: 8px;
  cursor: pointer;
}

a[href] {
  color: #3a62db;
}

a[href]:hover {
  color: #d923b4;
}
div.bc:has(div.sc:hover a[href]) { /* complicated :has will make Chrome become slow */
  /* Supported by Chrome only */
  background-color: red;
}

div.sc:has(a[href]) {
  /* Supported by Chrome and Firefox with layout.css.has-selector.enabled */
  background-color: #d4ff87;
}

<div class="bc">
  <div class="sc"><a href="http://google.com">Google</a></div>
  <div class="sc"><b>USA</b></div>
  <div class="sc"><i>MS</i></div>
</div>