为什么这个 :not() 指令不起作用？ [复制]答案

【问题标题】：Why this :not() instruction isn't working? [duplicate]为什么这个 :not() 指令不起作用？ [复制]
【发布时间】：2015-11-24 06:49:41
【问题描述】：

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

输出：li 22 不应着色。

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

【问题讨论】：

body :not(.foo) li 怎么样？
body :not(.foo) li 不工作

标签： css css-selectors

【解决方案1】：

它不起作用，因为您没有指定它是不能具有该类的确切元素。包含li 元素的ul 元素没有该类，因此与选择器的:not(.foo) 部分匹配。

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

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

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

【讨论】：

我不能使用直系后代，因为代码是动态的，可能有嵌套的 lis 和 uls。
@DocKodam：那么您可以使用任何其他方式来指定元素的位置。例如，如果它们直接位于 body 元素中（如示例中所示），则可以使用 body > :not(.foo) li。

【解决方案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

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

li{
  background-color: red;
}

.foo li{
  background-color: initial;
}

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

【讨论】：

这是不正确的。 :not 伪类可以单独使用，不必附加到另一个选择器。 developer.mozilla.org/en-US/docs/Web/CSS/%3Anot
就像Guffa说的，not类可以自己使用，第一个ul不在任何div里面。我需要选择任何容器。
对不起，你是对的。我已经更新了答案。
是的，我在阅读 RFC 时发现了 CSS 的逻辑。你的答案现在是正确的。我必须使用替代方案。
没有 OR 关系。 :not(.foo) li 选择器通过首先将元素与li 匹配来评估，如果匹配，则检查它是否具有匹配:not(.foo) 的父元素。由于最近的父 ul 匹配，它永远不会考虑 div。