有两个类：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>