Wie das CSS: ist,: wo und: hat Pseudo-Klasse-Selektoren funktionieren

Key Takeaways

• Die CSS-Selektoren der Pseudoklasse: IS (),: WO () und: Has () bieten neue Möglichkeiten, um HTML-Elemente abzuzielen. Der: IS () -Auskörper ermöglicht ein effizienteres Styling mehrerer Elemente, wodurch die Notwendigkeit von ausführlichen Selektor -Saiten verringert wird. Der: WHERE () Selector arbeitet ähnlich wie: ist (), aber ohne Spezifität, was es nützlich macht, Basisstile ohne zunehmende Spezifität anzuwenden. Die: Has () Selector zielt auf ein Element ab, das eine Reihe von anderen enthält und eine lang erwartete Möglichkeit bietet, übergeordnete Elemente abzuzielen.
• Die: IS () und: Where () Pseudo-Klasse-Selektoren werden in allen modernen Browsern unterstützt, aber nicht im Internet Explorer. Der: Has () Selector ist derzeit neuer mit begrenzter Unterstützung, wird jedoch voraussichtlich bis 2023 weit verbreitet sein. Die Verwendung dieser Selektoren kann die CSS -Syntax vereinfachen und die Notwendigkeit von CSS -Präprozessoren verringern.
• Die Spezifität von: IS () und: wobei () die Selektoren unterscheiden. Der: IS () -Sektor hat die gleiche Spezifität wie der spezifischste Selektor innerhalb seiner Argumente, während der: WO () Selektor keine Spezifität hat. Dies kann für CSS -Resets praktisch sein, die eine Basis von Stilen anwenden, wenn kein spezifisches Styling verfügbar ist, sodass die Überschreibung eines CSS -Reset -Stils unabhängig von der Spezifität zugelassen wird.

Mit CSS -Selektoren können Sie Elemente nach Typ, Attributen oder Ort im HTML -Dokument auswählen. In diesem Tutorial wird drei neue Optionen erklärt -: ist (),: wo () und: Has (). Selektoren werden üblicherweise in Stylesheets verwendet. Das folgende Beispiel lokalisiert alle

-An -Elemente und ändert das Schriftgewicht in BOT:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Sie können auch Selektoren in JavaScript verwenden, um DOM -Knoten zu suchen:

• document.querySelector () gibt das erste passende HTML -Element
zurück
• document.querySelectorAll () gibt alle passenden HTML-Elemente in einem Array-ähnlichen Nodelist
zurück

Die Pseudo-Klasse-Selektoren zielen auf HTML-Elemente auf der Grundlage ihres aktuellen Zustands ab. Am bekanntesten ist vielleicht: Hover, das Stile anwendet, wenn sich der Cursor über ein Element bewegt. Daher wird es verwendet, um klickbare Links und Schaltflächen hervorzuheben. Weitere beliebte Optionen sind:

• : Besucht: Übereinstimmende Links
Übereinstimmungen
• : Ziel: Übereinstimmung mit einem Element, das von einer Dokument -URL
abzielt
• : Erstkind: Zieht das erste untergeordnete Element
• : N-te-Kind: Wählt bestimmte untergeordnete Elemente
aus
• : leer: Übereinstimmung mit einem Element ohne Inhalt oder untergeordnete Elemente
• : Überprüft: Übereinstimmt mit einem Schaltkästchen oder einem Optionsfeld umgeschaltet
: leer: stiles ein leeres Eingangsfeld
: aktiviert: Übereinstimmung mit einem aktivierten Eingangsfeld
: Deaktiviert: Übereinstimmung mit einem deaktivierten Eingangsfeld
: Erforderlich: Zieht ein erforderliches Eingangsfeld
: Gültig: Übereinstimmung mit einem gültigen Eingabefeld
: Ungültig: Übereinstimmung mit einem ungültigen Eingabefeld
: abspielen: zielt auf ein abspieltes audio- oder Videoelement
• ab

Die Browser haben kürzlich drei weitere Pseudo-Klasse-Selektoren erhalten…

Das CSS: IS Pseudo-Klasse Selector

HINWEIS: Dies wurde ursprünglich als: Matches () und: Any () angegeben, aber: IS () ist zum CSS -Standard geworden. Sie müssen oft das gleiche Styling auf mehr als ein Element anwenden. Zum Beispiel ist der

-Perabschnitttext standardmäßig schwarz, aber grau, wenn er in einem oder angezeigt wird.

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Dies ist ein einfaches Beispiel, aber ausgefeiltere Seiten werden zu komplizierteren und ausführlicheren Selektor -Saiten führen. Ein Syntaxfehler in jedem Selektor könnte das Styling für alle Elemente brechen. CSS -Präprozessoren wie SASS -Erlaubnisnestungen (das auch zu nativem CSS kommt):

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Dadurch wird ein identischer CSS -Code erstellt, die Schreibaufwand reduziert und Fehler verhindern. Aber:

• bis ein natives Nisting eintrifft, benötigen Sie ein CSS -Build -Tool. Möglicherweise möchten Sie eine Option wie SASS verwenden, die jedoch Komplikationen für einige Entwicklungsteams einführen können.
• Nesting kann andere Probleme verursachen. Es ist einfach, tief verschachtelte Selektoren zu konstruieren, die immer schwieriger zu lesen und ausführlich CSS auszugeben.

: IS () bietet eine native CSS -Lösung, die in allen modernen Browsern (nicht dh) die volle Unterstützung bietet:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Ein einzelner Selektor kann eine beliebige Anzahl von: IS () Pseudoklasse enthalten. Beispielsweise wendet der folgende komplexe Selektor eine grüne Textfarbe auf alle

,

und

Elemente an, die Kinder eines haben, das eine Klasse von .primary oder .Secondary hat und das nicht ist und das nicht ist, und das ist nicht nicht Das erste Kind eines :

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Der äquivalente Code ohne: IS () Erforderliche sechs CSS -Selektoren:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

Beachten Sie, dass: is () nicht übereinstimmen :: vor und :: nach pseudo-elementieren, sodass dieser Beispielcode fehlschlägt:

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

Das CSS: Wo Pseudo-Klasse Selector

: WO () Selektorsyntax ist identisch mit: IS () und wird auch in allen modernen Browsern (nicht dh) unterstützt. Es führt oft zu einem identischen Styling. Zum Beispiel:

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

Der Unterschied ist Spezifität . Spezifität ist der Algorithmus, mit dem bestimmen wird, welcher CSS -Selektor alle anderen überschreiben soll. Im folgenden Beispiel ist Artikel P spezifischer als P allein, sodass alle Absatzelemente innerhalb eines grau sein werden:

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Bei: IS () ist die Spezifität der spezifischste Selektor in seinen Argumenten. Bei: Wo () ist die Spezifität Null. Betrachten Sie das folgende CSS:

<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>

Wenden wir dieses CSS auf folgende HTML an:

<span>article p {
</span>  <span>color: black;
</span><span>}
</span>
<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Der Absatztext wird rot gefärbt, wie in der folgenden Codepen -Demo gezeigt.

Siehe den Stift Verwenden des: IS Selector von SitePoint (@sinepoint) auf Codepen.

Der: IS () -Auskörper hat die gleiche Spezifität wie Artikel P, ist jedoch später im Stylesheet, sodass der Text rot wird. Es ist erforderlich, sowohl den Artikel P als auch: IS () Selectors zu entfernen, um eine blaue Farbe anzuwenden, da der: WO () -Sektor weniger spezifisch als beides ist. Mehr Codebasen verwenden: IS () als: wo (). Die Nullspezifität von: WO () könnte jedoch für CSS -Resets praktisch sein, die eine Grundlinie von Standardstilen anwenden, wenn kein spezifisches Styling verfügbar ist. Normalerweise wenden Resets eine Standardschrift, Farbe, Paddings und Ränder an. Dieser CSS -Reset -Code wendet einen Top -Rand von 1EM auf

Überschriften an, es sei denn, Sie sind das erste Kind eines Element:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Der Versuch, später im Stylesheet einen benutzerdefinierten

oberen Rand festzulegen, hat keinen Einfluss, da Artikel: First-Child eine höhere Spezifität aufweist:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Sie können dies anhand eines Selektors mit höherer Spezifität beheben, es ist jedoch mehr Code und für andere Entwickler nicht unbedingt offensichtlich. Sie werden irgendwann vergessen, warum Sie es benötigt haben:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Sie können das Problem auch beheben, indem Sie sich für jeden Stil bewerben! Wichtig, aber vermeiden Sie dies! Eine bessere Wahl ist die Übernahme der Nullspezifität von: Wo () in Ihrem CSS -Reset:

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Sie können jetzt jeden CSS -Reset -Stil unabhängig von der Spezifität überschreiben. Es ist nicht erforderlich, weitere Selektoren oder! Wichtig zu sein:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

Das CSS: hat Pseudo-Klasse-Selektor

Der: Has () -Sektor verwendet eine ähnliche Syntax wie: IS () und: WO (), aber es zielt auf ein Element ab, das

eine Reihe von anderen enthält. Hier ist beispielsweise das CSS zum Hinzufügen eines blauen Zweipixelrandes zu einem 3-Pixel-Link, der eine oder mehrere oder Tags enthält: Dies ist die aufregendste CSS -Entwicklung seit Jahrzehnten! Entwickler haben endlich eine Möglichkeit, über Elternelemente zu zielen!

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

Der schwer fassbare „Parent Selector“ war eines der am meisten angeforderten CSS -Funktionen, erhöht jedoch die Leistungskomplikationen für Browser -Anbieter, und daher war es eine lange Zeit. In simplen Worten: Browser wenden CSS -Stile auf ein Element an, wenn es auf der Seite gezogen wird. Das gesamte übergeordnete Element muss daher beim Hinzufügen weiterer untergeordneter Elemente umgezogen werden.

• Hinzufügen, Entfernen oder Modifizieren von Elementen in JavaScript kann das Styling der gesamten Seite bis hin zum umschließenden beeinflussen.

Unter der Annahme, dass die Anbieter Leistungsprobleme gelöst haben, ermöglicht die Einführung von: Has () Möglichkeiten, die in der Vergangenheit ohne JavaScript unmöglich gewesen wären. Sie können beispielsweise die Stile eines äußeren Formulars

und die folgende Sendetaste festlegen, wenn das erforderliche innere Feld nicht gültig ist:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

In diesem Beispiel fügt ein Navigations -Link -Submenu -Indikator hinzu, der eine Liste der untergeordneten Menüelemente enthält:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Oder vielleicht könnten Sie Debugging -Stile hinzufügen, z.

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Bevor Sie in Ihren Redakteur einsteigen und Ihre CSS -Codebasis refactor, beachten Sie bitte, dass: Has () neu ist und die Unterstützung begrenzter ist als für: IS () und: Wo (). Es ist in Safari 15.4 und Chrome 101 hinter einer experimentellen Flagge erhältlich, sollte jedoch bis 2023 weit verbreitet sein.

Selektorzusammenfassung

Die: IS () und: WO () Pseudo-Klasse-Selektoren vereinfachen die CSS-Syntax. Sie müssen weniger Nisten- und CSS -Präprozessoren benötigen (obwohl diese Tools andere Vorteile wie Teil, Schleifen und Minifikation bieten). : Has () ist wesentlich revolutionärer und aufregender. Die Auswahl der Eltern wird schnell populär und wir werden die dunklen Zeiten vergessen! Wir werden ein volles Tutorial veröffentlichen, wenn es in allen modernen Browsern erhältlich ist. Wenn Sie mit allen anderen Dingen, wie CSS, wie Grid und Flexbox, tiefer zu CSS Pseudo-Klasse-Selektoren ausgraben möchten, lesen Sie das fantastische Buch CSS Master , von Tiffany Brown.

häufig gestellte Fragen (FAQs) zu CSS: IS () und: WO () Pseudo-Klasse-Selektoren

Was ist der Hauptunterschied zwischen: IS () und: WO () Pseudo-Klasse-Selektoren in CSS? liegt in ihrer Spezifität. Der: IS () Pseudo-Klasse-Selektor hat die gleiche Spezifität wie der darin platzierte Selektor. Andererseits hat der Selektor der Pseudoklasse: Wo () die Spezifität von Null, was bedeutet, dass sie nicht zur Gesamtspezifität eines Selektors beiträgt. Dies kann besonders nützlich sein, wenn Sie Stile auf eine Gruppe von Elementen anwenden möchten, ohne die Spezifität zu erhöhen. >

Ja, Sie können verwenden: IS () und: WO () Pseudo-Klasse-Selektoren mit allen CSS-Eigenschaften. Diese Pseudo-Klasse-Selektoren sind nicht an bestimmte CSS-Eigenschaften gebunden. Sie werden verwendet, um Elemente basierend auf bestimmten Bedingungen auszuwählen, und Sie können jede CSS -Eigenschaft auf die ausgewählten Elemente anwenden.

sind: IS () und: WO () Pseudo-Klasse-Selektoren, die in allen Browsern unterstützt werden? in den meisten modernen Browsern unterstützt. Sie werden jedoch möglicherweise nicht in älteren Browsern oder einigen Versionen von Internet Explorer unterstützt. Es ist immer eine gute Idee, den aktuellen Browser-Support auf einer Website wie kann ich verwenden, bevor ich diese Selektoren in Ihrem Code verwende. >

Die: IS () Pseudo-Klasse-Selektor in CSS ermöglicht es Ihnen, mehrere Selektoren in einem zu gruppieren. Anstatt drei separate Selektoren für H1, H2 und H3 zu schreiben, können Sie sie mit dem Selektor: IS () Pseudo-Klasse wie folgt gruppieren :: IS (H1, H2, H3) {Farbe: Blau; }.

Wie kann ich den Selektor der Pseudoklasse in CSS verwenden: WO () Pseudo-Klasse in CSS? IS () Pseudo-Klasse-Selektor, hat aber keine Spezifität. Sie können es beispielsweise verwenden, um alle Elemente mit einer bestimmten Klasse auszuwählen, ohne die Spezifität zu erhöhen :: WO (.class1, .class2, .class3) {color: blau; }.

Kann ich nest: is () und: wo () pseudoklasse selektoren? Dies kann nützlich sein, wenn Sie Elemente auswählen möchten, die mehrere Bedingungen erfüllen. Sie können beispielsweise alle H1- und H2 -Elemente in einem DIV -Element wie diesem auswählen: Div: IS (H1, H2) {Farbe: Blau; }.

Kann ich verwenden: IS () und: WO () Pseudo-Klasse-Selektoren mit Pseudo-Elementen? -Kasselektoren mit Pseudoelementen. Sie können beispielsweise alle ersten Buchstaben von H1- und H2-Elementen wie folgt auswählen :: IS (H1, H2) :: Erstgeschichte {Farbe: Blau; }.

Kann ich verwenden: IS () und: WO () Pseudo-Klasse-Selektoren mit Attribut-Selektoren? Klassenwählern mit Attributauswahlern. Sie können beispielsweise alle Elemente mit einem Daten-Attribut wie folgt auswählen :: IS ([Datenattribute]) {Farbe: Blau; }.

Kann ich verwenden: IS () und: Wo () Pseudo-Klasse-Selektoren mit Klassenauswahlern? Klassenauswahl mit Klassenauswahl. Zum Beispiel können Sie alle Elemente mit einer bestimmten Klasse wie folgt auswählen :: IS (.class1, .class2, .class3) {Farbe: Blau; }.

Kann ich verwenden: IS () und: Wo () Pseudo-Klasse-Selektoren mit ID-Selektoren? Klassenauswahl mit ID -Selektoren. Beispielsweise können Sie alle Elemente mit einer bestimmten ID wie folgt auswählen :: IS ( #ID1, #ID2, #id3) {color: blau; }.

Das obige ist der detaillierte Inhalt vonWie das CSS: ist,: wo und: hat Pseudo-Klasse-Selektoren funktionieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!