为什么这个 CSS :not() 声明不过滤掉？

Question

我想选择不是特定类的后代的跨度，我们称之为“否”。这是我的 CSS：

div:not(.no) span{background-color:#00f;}

这是 HTML

<div>
    <span>yes 1</span>
</div>
<div class="no">
        <span>no 1</span>
</div>
<div class="no">
    <div>
           <span>no 2</span>
    </div>
</div>

两个问题：

1. 为什么我的 CSS 同时适用于 yes 1 和 no 2？

2. 如果我切换到通用选择器，为什么整个事情都会中断？

   *:not(.no) span{background-color:#00f;}
   

这是 JSFiddle 中的代码：http://jsfiddle.net/stephaniehobson/JtNZm/

Answer 1

1. span 元素的父 div 元素都没有 no 类，无论其他祖先是否有它：

   <div> <!-- This is div:not(.no), pretty much a given -->
       <span>yes 1</span>
   </div>
   

   <div class="no"> <!-- In this case, although this is div.no... -->
       <div>        <!-- ... this is div:not(.no)! -->
              <span>no 2</span>
       </div>
   </div>
   

2. html 和 body，它们是 div 和 span 元素的祖先，在使用通用选择器时（或者更确切地说，在省略类型选择器时）满足 *:not(.no)。这会导致您的所有span 元素所有具有背景颜色。

一个解决方案是使用子组合器将否定过滤器锚定到 body 元素，如果您的顶级 div 元素将始终是 body 的子元素：

body > div:not(.no) span { background-color: #00f; }

jsFiddle demo

另一种解决方案是简单地使用覆盖样式。

Answer 2

BoltClock 是正确的。如果您像这样使用选择器，可能会更有意义：

选择任何span 元素
继承自 div 元素
其class 值不包含单词no。

您的示例中每个选定的spans 实际上都是div 的后裔，其class 值不包含单词no——事实上它们中的第二个也是从@ 派生的其class 值确实包含单词no 的987654329@ 不会否定（哈哈！）前面的语句。

有趣的是，我敢打赌，如果您将第二个 no 下移一级，第二个 span 仍然会匹配。 CSS 没有元素邻近的概念，因此任何祖先 div 都应该足以匹配选择器，无论它是否“更接近”span。

Answer 3

我认为最好的选择是将你的陈述分成2份：

div span { background-color:#00f; }
.no span { background-color:#fff; }

你可以在这里看到效果：http://jsfiddle.net/JHTqp/