Heim > Artikel > Web-Frontend > Verstehen Sie den CSS-Pseudoklassenselektor in 5 Minuten: is :not
In diesem Artikel werden die CSS-Pseudoklassen is und :not vorgestellt und die Beziehung zwischen is, not, match und any
:not
Die CSS-Pseudoklasse :not() stellt Elemente dar, die nicht mit einer Liste von Selektoren übereinstimmen. Da sie die Auswahl bestimmter Elemente verhindert, ist dies bekannt als Negations-Pseudoklasse.Das Obige ist MDNs Erklärung von nicht
Empfohlenes Lernen: CSS-Video-Tutorial
Wir sollten in der Lage sein, allein anhand des Namens ein allgemeines Verständnis davon zu erlangen. Keine Auswahl, andere Elemente in Klammern ausschließenDas einfachste Beispiel: Durch die Verwendung von CSS wird die Schriftfarbe im Div in Blau geändert, ohne dass der HTML-Code geändert wird. 🎜> Aus dem obigen Beispiel können Sie die Rolle des Nicht-Pseudoklassenselektors klar verstehen Lassen Sie uns Aktualisieren Sie es, fragen Sie: außer span und p im div, ändern Sie die anderen Schriftfarben in Blau<div> <span>我是蓝色</span> <p>我是黑色</p> <h1>我是蓝色</h2> <h2>我是蓝色</h2> <h3>我是蓝色</h3> <h4>我是蓝色</h4> <h5>我是蓝色</h5> </div>Es gibt eine prägnantere Methode wie folgt, aber die Kompatibilität ist derzeit nicht sehr gut Empfohlene Verwendung
div span,div h2,div h3, div h4,{ color: blue; }
Kompatibel
Außer IE8 unterstützen es derzeit alle gängigen Browser, Sie können es bedenkenlos verwenden:is
Die CSS-Pseudoklassenfunktion :is() verwendet eine Selektorliste als Argument und wählt jedes Element aus, das von einem der Selektoren in dieser Liste ausgewählt werden kann zum Schreiben großer Selektoren in einer kompakteren Form.
Das Obige ist die Erklärung von MDN
Bevor Sie sagen: Sie müssen zuerst die Beziehung zwischen Übereinstimmungen verstehenMatches ist das vergangene Leben von is, aber es ist im Wesentlichen dasselbe und seine Verwendung ist genau die gleiche Die Bedeutung des Wortes Matches passt sehr gut zu seiner Funktion, aber das hat es Die umgekehrte Funktion von „not“, da „not“ auf der anderen Seite dieses Mal wirklich fehl am Platz aussieht und die Wörter nicht prägnant genug sind, wurde daher umbenannt. Es gibt auch ein Problem: https://github.com/w3c/. csswg-drafts/issues/3258, was die Quelle der Namensänderung ist Okay, jetzt wissen wir, dass Übereinstimmungen und is eigentlich dasselbe sind. Wie wird es also verwendet? Beispiel: Machen Sie das p-Tag unter Header und Main und der Text wird blau, wenn Sie mit der Maus darüber fahrenÜbereinstimmungen und ist?
div:not(p){ color: blue; }Die vorherige Methode
div:not(p):not(span){ color: blue; }ist die Art und Weise, ihn zu schreiben
div:not(p,span){ color: blue; }Aus dem obigen Beispiel können Sie wahrscheinlich den Einfluss von is erkennen, aber es spiegelt nicht vollständig die Leistungsfähigkeit von is wider. Wenn Sie jedoch mehr Inhalte auswählen, insbesondere solche mit mehr Ebenen, werden Sie das feststellen Es gibt viele Möglichkeiten, is zu schreiben. Nehmen Sie zur Prägnanz ein Beispiel von MDN und schauen Sie sich die vorherige Schreibmethode von
<header> <ul> <li><p>鼠标放上去变蓝色</p></li> <li><p>鼠标放上去变蓝色</p></li> </ul> <p>正常字体</p> </header> <main> <ul> <li><p>鼠标放上去变蓝色</p></li> <li><p>鼠标放上去变蓝色</p></li> <p>正常字体</p> </ul> </main> <footer> <ul> <li><p>正常字体</p></li> <li><p>正常字体</p></li> </ul> </footer>is Schreibmethode von
header ul p:hover,main ul p:hover{ color: blue; }an. Es ist ersichtlich, dass mit zunehmender Verschachtelungsebene der Vorteil von is immer offensichtlicher wird. Nachdem wir über is gesprochen haben, müssen wir alle kennen lernen das Ersetzen von Streichhölzern.
Welche Beziehung besteht zwischen irgendetwas und ist?
Ja, es ist auch ein Ersatz für Any. Es behebt einige der Nachteile von Any, wie Browser-Präfixe, Auswahlleistung usw. Any hat genau die gleiche Funktion So wie es ist, besteht der einzige Unterschied darin, dass es mit einem Browser-Präfix hinzugefügt werden muss. Die Verwendung ist wie folgt:is(header, main) ul p:hover{ color: blue; }SchlussfolgerungDie obige Einführung beschreibt grob die Beziehung zwischen CSS-Pseudoklassen sind, nicht, entsprechen und alle
Die Kombination von ist+nicht ist der allgemeine TrendDieser Artikel stammt von der chinesischen PHP-Website,
CSS-Tutorial
Kolumne, willkommen zum LernenDas obige ist der detaillierte Inhalt vonVerstehen Sie den CSS-Pseudoklassenselektor in 5 Minuten: is :not. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!