为什么：not（）指令不起作用？

Question

我尝试选择页面中的所有li，除了它们在容器（上升）内的类.foo

输出：li 22不应着色。

我不能使用直接后代，因为可能有嵌套的lis和uls。

Answer 1

它没有用，因为你没有指定它是那个不能拥有该类的精确元素。包含ul元素的li元素没有该类，因此匹配选择器的:not(.foo)部分。

确保:not(.foo)部分仅适用于正确的元素，例如通过指定元素与列表元素的确切位置：

:not(.foo) > ul > li { background: red; }

<ul>
  <li>11</li>
</ul>
<div class="foo">
  <ul>
    <li>22</li>
  </ul>
</div>

Answer 2

我猜css选择器使用OR或ORELSE关系。因此，当您使用类似:not(.foo) li之类的选择器时会发生类似情况：

statement1：首先它会检查：实际元素的标记名是li吗？ （true）
statement2_1：在第二位，它会检查：最近的父母班级不是.foo？ （true）
statement2_2：在下一个位置，它会检查下一个父级：下一个父级不是.foo（false）

理论上，以下陈述评估：
statement1 AND (statement2_1 ORELSE statement2_2)
true AND (true ORELSE false) => true AND true = > true

如果你只是尝试其他方式怎么办：

＆＃13;

＆＃13;

li{
  background-color: red;
}

.foo li{
  background-color: initial;
}

＆＃13;

<ul>
  <li>11</li>
</ul>
<div class=foo>
  <ul>
    <li>22</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;