爲什麼這樣：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

回答