:not()选择器中的两个类 [英] Two classes in :not() selector

问题描述

当元素没有两个类(不是两个类中的任何一个，而是两个类中的两个)时，我想对元素应用某些样式.:not 选择器似乎不接受两个类.使用两个单独的:not 选择器会使它解释为OR语句.

I want to have certain styles applied to an element, when it does not have two classes (not either of the two classes, but both of the two classes).
The :not selector does not seem to accept two classes. Using two seperate :not selectors causes it to be interpreted as an OR statement. I need the styles to be applied when it is does

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" )时，才不应应用样式.

So any element with the class foo should have the styles applied to it, as well as any element with the class bar. Only if an element has both classes (class="foo bar"), the styles should not be applied.

推荐答案

:not 伪类具有一个简单的选择器，因此请使用属性选择器

The :not pseudo class takes a simple selector, so use i.e. the attribute selector

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>

根据评论进行更新

如果类的顺序可以更改，请这样做

If the order of the classes can alter, do like this

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>

这篇关于:not()选择器中的两个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！