CSS: funktioniert nicht wie erwartet

Question

Ich möchte Elemente auswählen, die nicht beide Klassen .test und .test1 haben. Folgendes funktioniert nicht.

ul li:not(.test.test1) 
 
{ 
 
    color:red; 
 
}

<ul> 
 
    <li class="test test1">one..</li> 
 
    <li class="two">two</li> 
 
    <li class="three">three</li> 
 
</ul>

Answer 1

Dies wird erwartet, da pro MDN

„die Negation CSS pseudo-Klasse: nicht (X), ist eine funktionale Notation ein einfaches Selektor unter X als Argument. "

Leider Sie in nicht einen einfachen Selektor.

CSS Spec Die Definition eines einfachen Selektor ist:

... ein von einem besonderen Aspekte abgestimmt Element. Ein Typselektor, ein universeller Selektor, ein Attributselektor, ein Klassenselektor, ein ID-Selektor oder eine Pseudo-Klasse ist ein einfacher Selektor.

Leider ist Ihr ist eine Verbindung Selektor wie es zwei Klassen hat.

@Rounin hat hier die optimale Lösung. Das obige ist nur eine Erklärung dafür, warum Ihr Selektor fehlschlägt.

Answer 2

Diese Arbeit sollte:

ul li:not(.test),ul li:not(.test1) 
{ 
    color:red; 
} 

Answer 3

Oft, wenn man sich in einer Situation, wo Sie :not verwenden müssen, wird es eine elegantere Weg, um wieder -Schreiben Sie Ihre Stile, Bereitstellung positive anstatt negative Targeting.

Zum Beispiel, anstatt alles Targeting die ist nicht.test.test1 und es color:rgb(255,0,0) geben, warum nicht:

• Farbe allescolor:rgb(255,0,0); und dann
• Positively .test.test1 Ziel, wieder Färbung es color:rgb(0,0,0)

Auf diese Weise können die Vorteile der Kaskade nehmen, genau in der Weise, dass es funktionieren soll.

li { 
 
color: rgb(255,0,0); 
 
} 
 

 
li.test.test1 { 
 
color: rgb(0,0,0); 
 
}

<ul> 
 
    <li class="test test1">one..</li> 
 
    <li class="two">two</li> 
 
    <li class="three">three</li> 
 
</ul>