我可以在另一个 :has 选择器中使用 :has 选择器吗？

Question

我想做到这一点，以便每当有人将鼠标悬停在.list中的类.a（或.b）上时，更改具有相同类的图标的样式。

<div class="icons">
  <a class="a"></a>
  <a class="b"></a>
</div>

<div class="list">
  <span class="a">A</span>
  <span class="b">B</span>
</div>

我尝试过以下方法，但没有成功。

icons:has(.a:hover) .a {
  color: blue;
}

Answer 1

除了您的代码没有实际实现相关代码之外，它还有许多其他问题：

• 您正在选择

  <icons>

  ，它不存在

• .icons .a

  中没有任何内容可供悬停
• 您正在使用后代选择器，选择

  .a

  外部与内部相同的

  :has

一旦你纠正了这些，你就可以看到

:hover

里面的

:has

有效：

.icons:has(.a:hover) + .list .a {
  color: blue;
}

<div class="icons">
  <a class="a">X</a>
  <a class="b">Y</a>
</div>

<div class="list">
  <span class="a">A</span>
  <span class="b">B</span>
</div>

现在，如果您将光标悬停在

X

上，

A

将变为蓝色。

但是，在回答此问题时，某些浏览器不支持

:has

本身；最值得注意的是，它在 Firefox 上默认未启用。

Answer 2