有兩個類：not（）選擇器

Question

我希望某些樣式適用於元素，但它沒有兩個類（不是兩個類中的任何一個，而是兩個類都有）。
:not選擇器似乎不接受兩個類。使用兩個獨立的:not選擇器將其解釋爲OR語句。我需要的時候纔不會被應用

p:not(.foo.bar) { 
 
    color: #ff0000; 
 
}

<p class="foo">This is a (.foo) paragraph.</p> 
 
<p class="bar">This is a (.bar) paragraph.</p> 
 
<p class="foo bar">This is a (.foo.bar) paragraph.</p> 
 
<p>This is a normal paragraph.</p>

的樣式，以便與類foo任何元素應該有適用於它的風格，以及與類bar任何元素。只有一個元素具有兩個類別（class="foo bar"），才能應用樣式。

Answer 1

的:not僞類需要一個簡單的選擇，因此使用即屬性選擇器基於評論

如果類的順序

p:not([class="foo bar"]) { 
 
    color: #ff0000; 
 
}

<p class="foo">This is a (.foo) paragraph.</p> 
 
<p class="bar">This is a (.bar) paragraph.</p> 
 
<p class="foo bar">This is a (.foo.bar) paragraph.</p> 
 
<p>This is a normal paragraph.</p>

---

更新可以改變，像這樣做

p:not([class="bar foo"]):not([class="foo bar"]) { 
 
    color: #ff0000; 
 
}

<p class="foo">This is a (.foo) paragraph.</p> 
 
<p class="bar">This is a (.bar) paragraph.</p> 
 
<p class="foo bar">This is a (.foo.bar) paragraph.</p> 
 
<p>This is a normal paragraph.</p> 
 
<p class="bar foo">This is a (.bar.foo) paragraph.</p>

Answer 2

p:not(.foo):not(.bar) { 
 
    color: tomato; 
 
}

<p class="foo">This is a (.foo) paragraph.</p> 
 
<p class="bar">This is a (.bar) paragraph.</p> 
 
<p class="foo bar">This is a (.foo.bar) paragraph.</p> 
 
<p>This is a normal paragraph.</p>