两个类: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>