当然，这是一个太简单的问题，但令人难以置信的是，我不明白为什么这段代码没有按预期运行。
HTML:
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
CSS:
div:not(.remember) .foo
{
color:red;
}
这里是JsFiddle .
我希望每个具有类 .foo 的元素在具有类 .remember 的父级之外都是红色的，但似乎“not”子句不会触发。
我的错误在哪里？
最佳答案
您的最上面<div>没有.remember ，它通过了您的选择，所以 .foo风格改变了。使用child combinator .
您的选择要求父级不是 .remember也是<div> ，因为你还没有给出第二个 .foo父级，在本例中，其父级将为 <body> 。如果您不进行此限制，则如预期的那样，它的颜色为黑色。
:not(.remember) > .foo {
color:red;
}<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>关于CSS not() 子句不会触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27145268/