为什么这个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演示

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