:not() 不会忽略带有链接的列表项中的 class

Question

我正在尝试使用 :not() 忽略第一个列表项中的 .current class。

HTML:

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Page 2</a</li>
    <li><a href="#">Page 3</a></li>
</ul>

CSS:

ul li a:not(.current){color:red}

我无法让 :not() 忽略 .current class。

我也试过：

 ul li a:not(.current a){color:red}

Answer 1

:not 适用于正在使用的元素，因此适用于 li，在这种情况下使用 current

此外，不确定是否是错字，但在您的第二个 li 中，a 在结束标记

中缺少 <

ul li:not(.current) a {
  color:red
}

<ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
</ul>

Answer 2

您的 class 在 html 的 li 元素上，所以：

ul li:not(.current) a { color: red; }

应该可以。

:not() is not ignoring class in list-items with links