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

  • Z时代
  • 2024-01-10
  • 分类：问答

我要选择不是特定类后代的跨度，我们称其为“否”。这是我的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同时适用于是1和否2？

  2. 如果切换到通用选择器，为什么整个过程都会中断？
    *:not(.no) span{background-color:#00f;}

回答：

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

    <div> <!-- This is div:not(.no), pretty much a given -->
    <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>

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

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

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

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

以上是 为什么CSS：not（）声明没有过滤掉？ 的全部内容， 来源链接： utcz.com/qa/398046.html

回到顶部