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>

两个类：not（）选择器

2 个答案: