使用 has 伪选择器并以类作为参数？

Question

这应该将导航变成红色吗？

nav:has(.HasThis) {
  background-color: red !important;
}

这是一个演示。

nav:has(.HasThis) {
  background-color: red !important;
}

    <nav class="HasThis">
      <a href="/" aria-current="page">Home</a>
      <a href="/page2.html">Other page</a>
    </nav>

例如，这会将其变为红色。

nav.HasThis {
  background-color: red !important;
}

我想知道是否：

nav:has(.HasThis) {
  background-color: red !important;
}

应该实现同样的目标吗？

Answer 1

这应该将导航变成红色吗？

不，在阅读 MDN 网络文档时；

函数式

:has()

CSS 伪类表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时与至少一个元素匹配。

这个伪类提供了一种通过将 相对选择器列表 作为参数来选择父元素或相对于引用元素的前一个兄弟元素的方法。

因此

nav

没有

HasThis

锚定在该元素上。

---

如果您想定位所有具有

nav

类的

HasThis

，请使用：

nav.HasThis