Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?

Was sind :is und :where?

:is() und :where() sind Pseudofunktionen, die dabei helfen können, die Erstellung von Selektoren zu verkürzen und Wiederholungen zu vermeiden. Sie alle akzeptieren ein Array von Selektoren (ID, Klasse, Tag usw.) und wählen jedes Element aus, das in dieser Liste ausgewählt werden kann.

Dies ergibt wahrscheinlich nicht viel Sinn im Hinblick darauf, wie es uns hilft, kürzere Selektoren zu schreiben, also versuchen wir es mit :where() 和:is() .

Wie verwende ich :is und :where?

:where() kann uns helfen, solche Probleme zu lösen

.btn span > a:hover,
#header span > a:hover,
#Fußzeile span > a:hover {
  ...;
}

Werde so etwas

:wobei(.btn, #header, #footer) span > a:hover {
  ...;
} 

und :is() können helfen, dasselbe zu diesem Beispiel hinzuzufügen

ist(.btn, #header, #footer) span > a:hover {
  ...;
}

Was ist der Unterschied zwischen :is und :where?

:where() und :is() sehen gleich aus und funktionieren gleich, aber es gibt einen Unterschied zwischen ihnen, den Sie beachten sollten, nämlich dass sie unterschiedliche Besonderheiten haben 。:where() ist einfach und hat immer eine Spezifität von 0, während :is() die stärkste Spezifität aller Selektoren hat.

Was ist CSS-Spezifität (kurz gesagt)?

Es gibt vier Spezifitätsebenen in CSS. Jede Ebene oder Kategorie hat eine andere Punktzahl, und wir können alle Punktzahlen addieren, um die Spezifität des Selektors zu berechnen.

Die Stile werden auf das Element mit der höchsten Anzahl an Selektoren angewendet. Deshalb werden Ihre Stile beim Schreiben von CSS manchmal nicht angewendet und in den Entwicklertools durchgestrichen angezeigt.

Bewertungsergebnis für die Spezifität

• ID - Spezifitätswert beträgt 100
• Inline-Stile – Spezifitätsbewertung beträgt 1000
• Elemente und Pseudoklassen – ein Spezifitätswert von 1
• Klassen, Pseudoklassen und Attribute – der Spezifitätswert beträgt 10

Zum Beispiel

taste.btn {
  Farbe: rot;
}
.btn {
  Farbe: grün;
}

.btn = 10

button.btn = 1 + 10 = 11

Wenn wir die Klasse .btn auf das Tag <button> setzen, wird der Text rot, weil button.btn eine höhere Punktzahl hat als der Selektor .btn .

Wie Sie sehen, gibt es zwei verschiedene Spezifitätsstufen für Pseudoklassen. Dies liegt daran, dass unterschiedliche Pseudoklassen unterschiedliche Spezifitätsstufen haben können, je nachdem, welche Pseudoklassen Sie verwenden und wie Sie sie verwenden.

Dies ist das Ende dieses Artikels über die neu hinzugefügten CSS-Pseudoklassenfunktionen :where und :is. Weitere relevante Inhalte zu den CSS-Pseudoklassenfunktionen :where und :is finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!