为什么CSS：not（）声明没有过滤掉？

一尘不染

为什么CSS：not（）声明没有过滤掉？

css

我要选择不是特定类后代的跨度，我们称其为“否”。这是我的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>

两个问题：

为什么我的CSS同时适用于是1和否2？
如果切换到通用选择器，为什么整个过程都会中断？
```
*:not(.no) span{background-color:#00f;}
```

阅读 343

2020-05-16

共1个答案

一尘不染

span元素的两个父div元素都不具有class no，无论其他祖先是否都具有class ：
```
<div> 
<span>yes 1</span>
```

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

两个html和body，这是您的祖先div和span元素，满足*:not(.no)使用时一个通用选择（或者说，忽略一个类型选择时）。这会使您所有的span元素都具有背景色。

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

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

另一个解决方案是简单地使用替代样式。

2020-05-16