问题:

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>

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.

回答1:

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>

Update based on a comment

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>

回答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>

转载请标明出处:Two classes in :not() selector

文章来源: Two classes in :not() selector

标签

bar