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ßen

Das 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 verstehen

Übereinstimmungen und ist?

Matches 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

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;
}

Schlussfolgerung

Die obige Einführung beschreibt grob die Beziehung zwischen CSS-Pseudoklassen sind, nicht, entsprechen und alle

Die Kombination von ist+nicht ist der allgemeine Trend

Dieser Artikel stammt von der chinesischen PHP-Website,

CSS-Tutorial

Kolumne, willkommen zum Lernen

Das 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!