Der definitive Leitfaden für CSS-Pseudoklassen
Unabhängig davon, ob Sie ein Anfänger oder ein erfahrener CSS-Entwickler sind, haben Sie wahrscheinlich schon davon gehört Pseudoklassen. Die bekannteste Pseudoklasse ist wahrscheinlich :schweben, was uns ermöglicht, ein Element zu gestalten, wenn es ist im schwebeflugzustand, d. h. wenn eine Zeigervorrichtung, wie z. B. eine Maus, darauf zeigt.
Dem Konzept unserer vorherigen Posts zu margin: auto und CSS Floats folgend, betrachten wir die Pseudo-Klassen in diesem Beitrag eingehender. Wir werden sehen was Pseudoklassen wirklich sind, wie sie arbeiten, wie wir sie einordnen können, und Wie unterscheiden sie sich von Pseudoelementen?.
Was sind Pseudoklassen??
Eine Pseudoklasse ist ein Schlüsselwort, das wir CSS-Selektoren hinzufügen können einen besonderen Zustand definieren des zugehörigen HTML-Elements. Wir können eine Pseudo-Klasse zu einem CSS-Selektor hinzufügen, indem Sie die Doppelpunkt-Syntax : so was: a: hover …
Eine CSS-Klasse ist ein Attribut, das wir zu HTML-Elementen hinzufügen können, für die dieselben Stilregeln gelten sollen, z. B. Hauptmenüelemente oder Titel von Seitenleisten-Widgets. Mit anderen Worten, wir können CSS-Klassen dazu verwenden HTML-Elemente gruppieren oder klassifizieren das ist auf die eine oder andere Weise ähnlich.
Pseudoklassen sind ihnen in dem Sinne ähnlich, dass sie es auch sind Dient zum Hinzufügen von Stilregeln zu den Elementen, die dasselbe Merkmal aufweisen.
Aber während echte Klassen sind benutzerdefinierten und kann im Quellcode entdeckt werden, zum Beispiel Das Job von regulären CSS-Klassen ist zu Elemente klassifizieren oder gruppieren. Entwickler wissen, wie ihre Elemente gruppiert werden sollen: Sie können Klassen wie "Menüelemente", "Schaltflächen", "Miniaturansichten" usw. bilden, um ähnliche Elemente zu gruppieren. Diese Klassifizierungen basieren auf den Merkmalen der Elemente von den Entwicklern selbst gegeben. Zum Beispiel, wenn sich ein Entwickler für die Verwendung von a entscheidet HTML-Elemente haben jedoch ihre eigenen gemeinsamen Merkmale basierend auf Zustand, Position, Art und Interaktion mit der Seite und dem Benutzer. Dies sind die Eigenschaften, die es gibt nicht normalerweise im HTML-Code markiert, aber wir können zielen sie mit Pseudoklassen ab in CSS zum Beispiel: Dies sind die Merkmale, auf die die Pseudoklassen abzielen. Um den Unterschied zwischen Klassen und Pseudoklassen besser zu verstehen, nehmen wir an, wir verwenden die Klasse Wir können diese letzten untergeordneten Elemente mit dem folgenden CSS gestalten: Was passiert aber, wenn sich das letzte Element ändert? Nun, wir müssen das verschieben Dieser Streit von Aktualisierungsklassen können dem Benutzeragenten überlassen werden, zumindest für die Merkmale, die unter Elementen üblich sind (und ein letztes Element zu sein, ist so häufig, wie es sein kann). Haben eine vordefinierte Es gibt viele Arten von Pseudoklassen, die uns alle die Möglichkeit bieten, Elemente basierend auf ihren Merkmalen anzuvisieren, auf die sonst nicht oder nur schwer zugegriffen werden kann. Hier ist eine Liste der Standard-Pseudoklassen in MDN. Dynamische Pseudoklassen werden zu HTML-Elementen hinzugefügt und daraus entfernt dynamisch, basierend auf dem Zustand, in den sie übergehen als Reaktion auf die Interaktionen des Benutzers. Beispiele für dynamische Pseudoklassen sind Zustandsbasierte Pseudoklassen werden Elementen hinzugefügt, wenn sie vorhanden sind in einem bestimmten statischen Zustand. Einige der bekanntesten Beispiele sind: Die populärste staatliche Pseudoklasse muss sein Strukturelle Pseudoklassen klassifizieren Elemente basierend auf ihre Position in der Dokumentenstruktur. Die häufigsten Beispiele sind Es gibt auch verschiedene Pseudoklassen, die schwer zu klassifizieren sind, wie zum Beispiel: Eines der schwierigsten Dinge bei Pseudoklassen ist wahrscheinlich, den Unterschied zwischen den Beide sind strukturelle Pseudoklassen und Markierungen ein bestimmtes Element innerhalb eines übergeordneten Elements (Container), aber auf andere Weise. Annehmen n ist also 2 Schauen wir uns ein Beispiel an. Mal sehen, wie dieses kurze CSS den HTML-Code in zwei verschiedenen Fällen gestaltet. In Fall 1 wird das zweite Element innerhalb von a Aber wenn das übergeordnete Element tut habe einen zweiten Absatz, der In unserem Beispiel das Absatz 1 Kind 1 Absatz 2, Kind 3 Im zweiten Fall verschieben wir die ungeordnete Liste an die dritte Stelle, und der zweite Absatz wird davor stehen. Dies bedeutet, dass sowohl die Absatz 1 Kind 1 Absatz 2, Kind 2 Wenn Sie mehr über die Unterschiede zwischen den beiden erfahren möchten Wenn wir über Pseudoklassen sprechen, ist es auch wichtig zu verstehen wie sie sich von Pseudoelementen unterscheiden, um sie nicht zu verwechseln. Wir verwenden aber Pseudoklassen, um HTML-Elemente auszuwählen im Dokumentbaum vorhanden sein Die Pseudo-Elemente erlauben es uns, Elemente nur darauf zu richten existiert normalerweise nicht im DOM entweder überhaupt (z Es gibt auch ein Unterschied in der Syntax. Pseudoelemente werden im Allgemeinen mit Doppelpunkten identifiziert Dies kann zu Verwirrung führen, da in CSS2 auch Pseudo-Elemente mit einem einzelnen Doppelpunkt markiert wurden - Browser akzeptieren weiterhin die Ein-Doppelpunkt-Syntax für Pseudo-Elemente. Es gibt auch Unterschiede zwischen Pseudoklassen und Pseudoelementen in So können wir sie mit CSS ansprechen. Pseudo-Elemente können nur angezeigt werden nach dem die Sequenz der Selektoren, wohingegen Pseudoklassen an beliebiger Stelle in der CSS-Selektorsequenz platziert werden können. So können Sie beispielsweise den letzten Listeneintrag eines Listenelements anvisieren ODER Die erste Sequenz des Wählers wählt das letzte untergeordnete Element aus Versuchen wir etwas Ähnliches mit Pseudoelementen zu machen. Der obige CSS-Code ist gültig und der Text "rot" wird angezeigt nach dem das Dieser Code auf der anderen Seite funktioniert nicht wie wir kann die Position eines Pseudoelements nicht ändern innerhalb der Auswahlsequenz. Außerdem kann nur ein Pseudoelement neben einem Selektor angezeigt werden, wohingegen Pseudoklassen können miteinander kombiniert werden wenn die Kombination Sinn macht. Um beispielsweise auf erste untergeordnete Elemente zuzugreifen, die auch schreibgeschützt sind, können wir eine Kombination der Pseudoklassen erstellen Ein Wahlcode mit einem Es ist wichtig, das zu wissen diese sind nicht CSS-Pseudoklassen die von jQuery anvisiert werden. Sie werden als jQuery-Selektorerweiterungen bezeichnet. Mit jQuery-Selector-Erweiterungen können Sie dies tun zielen Sie auf HTML-Elemente mit einfacheren Schlüsselwörtern. Bei den meisten handelt es sich um Kombinationen mehrerer normaler CSS-Selektoren, die mit einem einzigen Schlüsselwort dargestellt werden.Zweck von Pseudoklassen
.zuletzt um die letzten Elemente in verschiedenen übergeordneten Containern zu identifizieren.
li.last text-transform: Großbuchstaben; option.last font-style: italic;
.zuletzt Klasse vom vorletzten zum aktuellen Element.:letztes Kind Pseudoklasse ist in der Tat sehr nützlich. Auf diese Weise wir muss nicht das letzte Element angeben im HTML-Code, aber wir können sie immer noch mit dem folgenden CSS gestalten: li: last-child text-transform: großbuchstaben; Option: last-child font-style: italic;
Haupttypen von Pseudoklassen
1. Dynamische Pseudoklassen
:schweben, :Fokus, :Verknüpfung, und :hat besucht, alle können dem hinzugefügt werden Anker-Tag. a: besuchte color: # 8D20AE; .button: hover, .button: focus font-weight: fett;
2. Zustandsbasierte Pseudoklassen
: geprüft das kann für Kontrollkästchen angewendet werden ():Vollbildschirm um auf ein Element zu zielen, das gerade im Vollbildmodus angezeigt wird:deaktiviert für HTML-Elemente, die sich im deaktivierten Modus befinden können, z , , und . : geprüft, welche kennzeichnet, ob ein Kontrollkästchen aktiviert ist oder nicht. .Ankreuzfeld: Aktiviert + Beschriftung Schriftstil: Kursiv; Eingabe: deaktiviert Hintergrundfarbe: #EEEEEE;
3. Strukturelle Pseudoklassen
:erstes Kind, :letztes Kind, und : n-te Kind (n) - all kann verwendet werden, um auf ein bestimmtes untergeordnetes Element in einem Container basierend auf seiner Position zu zielen - und :Wurzel welches auf das übergeordnete Element der höchsten Ebene im DOM abzielt. 4. Verschiedene Pseudoklassen
: nicht (x) welche Elemente auswählt, die nicht mit dem Selektor x übereinstimmen: lang (Sprachcode) Dadurch werden Elemente ausgewählt, deren Inhalt in einer bestimmten Sprache vorliegt: dir (direktionalität) die Elemente mit Inhalt einer bestimmten Richtung auswählt (von links nach rechts oder von rechts nach links). p: lang (ko) Hintergrundfarbe: # FFFF00; : root Hintergrundfarbe: # FAEBD7;
n-te Kind vs nth des Typs Pseudo-Klassen
: n-te Kind und nth-of-type Pseudoklassen.nth-of-child (n) zielt auf ein Element, das das ist zweites untergeordnetes Element des übergeordneten Elements, und nth-of-type (n) Ziele der zweite unter den dieselbe Art von Element (wie Absätze) in einem übergeordneten Element. / * ein Absatz, der auch das zweite Kind innerhalb des übergeordneten Elements ist * / p: nth-child (2) color: # 1E90FF; // hellblau / * der zweite Absatz innerhalb eines übergeordneten Elements * / p: nth-of-type (2) font-weight: bold;
Fall 1
n-te Kind (2) Regel gilt nicht für sie. Obwohl es ein zweites Kind ist, ist es es nicht ein Absatz. n-te des Typs (2) Regel gilt, da diese Regel nur nach dem sucht Elemente und kümmert sich nicht um andere Typen von Elementen (wie ungeordneten Listen) innerhalb des übergeordneten Elements.n-te des Typs (2) Die Regel wird den zweiten Absatz, der Child 3 ist, formatieren.
Ungeordnete Liste 1, Kind 2
Fall 2
: n-te Kind (2) und das nth-of-type (2) Regeln gelten, da der zweite Absatz auch das zweite Kind des Elternteils ist
Ungeordnete Liste 1, Kind 3
: n-te Kind und nth-of-type Pseudo-Klassen, CSS Tricks hat einen großartigen Beitrag. Wenn Sie SASS verwenden, kann Ihnen Family.scss beim Erstellen komplizierter helfen n-te Kind'Elemente.Pseudoklassen gegen Pseudoelemente
Pseudoelemente, sowie ::Vor und ::nach dem (Weitere Informationen finden Sie in diesem Tutorial.) von Benutzeragenten hinzugefügt, und Sie können mit CSS gezielt angesteuert und gestaltet werden genauso wie Pseudoklassen. ::Vor und ::nach dem) oder nur als bestimmte Teile vorhandener Elemente (z ::erster Brief oder :: Platzhalter). ::, während Pseudoklassen mit einem einzelnen Doppelpunkt identifiziert werden :.1. Ihr Platz in der CSS-Auswahlsequenz
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.rot) und das zweite wählt das letzte Kind unter den Elementen aus, die das besitzen .rot Klasse innen ul> .red :: after display: block; Inhalt: 'rot'; Farbe: # B0171F;
Artikel mit der Klasse .rot. ul> :: after.red display: block; Inhalt: 'rot'; Farbe: # B0171F;
2. Anzahl der Vorkommen in einer Auswahlsequenz
:erstes Kind und :schreibgeschützt auf die folgende Weise: : first-child: schreibgeschützt color: #EEEEEE;
jQuery Selector-Erweiterungen
: Syntax ist nicht immer eine richtige CSS-Pseudoklasse. Wenn Sie jQuery jemals verwendet haben, haben Sie möglicherweise viele seiner Selektoren verwendet : Syntax zum Beispiel $ (': Ankreuzfeld'), $ (': input') und $ (': ausgewählt'). / * Ändern Sie die Schriftart aller eingabebezogenen HTML-Elemente, wie button, select, und geben Sie * / $ (": input") .css ("font-family", "courier new") ein.
