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

我尝试在除因是一个容器（上升）内与类包含.foo为什么这样：not（）指令不起作用？

输出的页面选择所有li S：李22不应该是彩色的。

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

2015-11-21 Doc Kodam

'body：not（.foo）li'？ – adelowo

'body：not（.foo）li' not working –

我想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>

2015-11-21 14:57:34 Pho3nixHun

这是不正确的。 '：not'伪类可以被自己使用，它不必被附加到另一个选择器。 https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot – Guffa

就像Guffa说的那样，不是类可以自己使用，并且第一个ul不在任何div内。我需要选择任何容器。 –

对不起，你是对的。我已经更新了答案。 – Pho3nixHun

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

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

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

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

2015-11-21 14:54:28 Guffa

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

@DocKodam：然后您可以使用任何其他方式指定元素的位置。例如，如果它们直接位于'body'元素中（如示例中），则可以使用'body>：not（.foo）li'。 – Guffa

回答