Sowohl Pseudoelemente als auch Pseudoklassen werden durch Anhängen eines bestimmten Schlüsselworts nach dem Selektor, Befolgen ähnlicher Syntaxregeln und Festlegen entsprechender Stile in CSS-Regelblöcken definiert. Pseudoelemente können über das Inhaltsattribut Inhalte hinzufügen oder ersetzen. Beispielsweise können :before und :after Text, Bilder oder andere generierte Inhalte einfügen. Pseudoklassen wirken sich nur auf den Stil eines Elements aus, fügen jedoch keinen Inhalt hinzu oder ändern ihn. Sie ändern das Verhalten von Elementen basierend auf Benutzerinteraktion, Dokumentstruktur oder anderen logischen Bedingungen. Die Hauptunterschiede sind wie folgt:
Zielobjekte :
Pseudoklassenselektoren (Pseudoklassen) wirken auf tatsächlich vorhandene Elemente und werden verwendet, um einen bestimmten Status oder eine Beziehung des Elements zu beschreiben, z. B. den Zugriffsstatus des Links ( :visited ), den Mauszeigerstatus ( :hover ), und ob es sich um das erste untergeordnete Element in ( :first-child ) handelt, usw. Sie verändern nicht direkt die Struktur des Elements, sondern beeinflussen, wie sich das Element unter bestimmten Bedingungen verhält. Pseudoelementselektoren werden verwendet, um einen bestimmten Teil innerhalb eines Elements zu erstellen und auszuwählen oder um neue, virtuelle Inhaltsknoten vor und nach einem Element zu generieren. Beispielsweise können :before und :after verwendet werden, um zusätzlichen Inhalt einzufügen, :first-line und :first-letter wählen die erste Textzeile bzw. den ersten Buchstaben des Elements aus, :marker steuert den Markierungsstil für Listenelemente usw . Diese Pseudoelemente entsprechen nicht den tatsächlichen Elementen im HTML-Dokument, aber Stile können auf sie angewendet werden, als wären sie echte Teile des Dokuments.
Grammatik-ID :
Pseudoklassen werden normalerweise durch einen Doppelpunkt : :) identifiziert, z. B. :hover , :focus . Pseudoelemente werden in CSS3 durch zwei aufeinanderfolgende Doppelpunkte ( :: ) identifiziert, um sie von Pseudoklassen in älteren CSS-Versionen zu unterscheiden. Obwohl die meisten modernen Browser immer noch einzelne Doppelpunkte zur Darstellung von Pseudoelementen akzeptieren (z. B. :before ), wird zur Einhaltung der W3C-Standards und zur Wahrung bewährter Verfahren die Verwendung von Doppelpunktformen wie z. B. ::before , ::after empfohlen .
Wiederverwendbarkeit :
Pseudoklassen können im selben Selektor kombiniert werden, z. B. a:hover:focus um einen Link darzustellen, der sowohl schwebend als auch fokussiert ist. Pseudoelemente können im Allgemeinen nicht wiederholt im selben Selektor erscheinen, da sie einen bestimmten Teil des Elements oder einen neu generierten Inhalt darstellen. Ein Element kann nur ein :before oder :after -Pseudoelement gleichzeitig haben.
CSS3-Pseudoelemente sind spezielle CSS-Selektoren, die es Entwicklern ermöglichen, die Stile bestimmter Teile eines Elements über CSS hinzuzufügen oder zu ändern, ohne die HTML-Struktur zu ändern, oder virtuelle Inhalte innerhalb oder außerhalb des Elements zu generieren und zu steuern. Im Folgenden finden Sie eine ausführliche Erläuterung und Anwendungsbeispiele einiger gängiger CSS3-Pseudoelemente:
1. :before und :after
:before und :after erstellen jeweils ein neues, inhaltsloses, unsichtbares „untergeordnetes Element“ nach dem Inhaltsbereich des ausgewählten Elements. Durch Festlegen von Stilen (wie Inhalt, Größe, Farbe, Hintergrund usw.) für dieses Pseudoelement wird es dann sichtbar und erscheint optisch als der Teil, der unmittelbar auf den Inhalt des ursprünglichen Elements folgt. Diese Inhalte werden durch content Inhaltsattribut definiert und es können zusätzliche Stile angewendet werden.
Grammatik :
Selektor:vor {
Inhalt: „…“ /* oder anderer Wert */;
/* Andere Stildeklarationen */
}
Selektor:nach {
Inhalt: „…“ /* oder anderer Wert */;
/* Andere Stildeklarationen */
} Unter diesen ist das content der Schlüssel zur Definition des von Pseudoelementen generierten Inhalts. Es kann folgende Werte annehmen:
String : Geben Sie direkt den anzuzeigenden Text an. In Anführungszeichen eingeschlossene HTML-Entitäten : z. B. content: "—"; URL : Fügen Sie Bildressourcen ein, z. B. content: url(image.png); Generieren Sie Inhaltsschlüsselwörter : z. B. content: counter(name); (counter) oder content: attr(attribute-name); ;
Anwendungsbeispiele :
1.1. Dekorativen Inhalt hinzufügen
Fügen Sie Zitate, Symbole oder andere dekorative Elemente hinzu.
Zitate hinzufügen:
Blockquote:before {
Inhalt: offenes Zitat;
Schriftgröße: größer;
Farbe: #666;
}
Blockquote:nach {
Inhalt: Schlusszitat;
}Fügen Sie benutzerdefinierte Symbole vor/nach Listenelementen hinzu:
li:vor {
Inhalt: URL(icon-checkmark.svg);
Rand rechts: 0,5em;
}
li.completed:after {
Inhalt: "2713"; /* Unicode-Zeichen: Häkchen */
Farbe: grün;
Schriftgröße: 1,5em;
vertikal ausrichten: super;
}1.2. Schwimmer löschen
:after wird häufig verwendet, um ein leeres Element auf Blockebene zu erstellen, und wird mit clear:both verwendet, um die Auswirkungen des Floatings auf nachfolgende Elemente zu beseitigen und das Problem des „Höhenkollaps“ zu vermeiden.
.clearfix:after {
Inhalt: "";
Anzeige: Tisch;
klar: beides;
} Wenden Sie die Klasse .clearfix auf Containerelemente an, deren interne Floats gelöscht werden müssen.
1.3. HTML-Inhalte ersetzen oder erweitern
Mit der Funktion attr() können Sie den Wert aus dem Attribut des Elements als Inhalt von :after extrahieren, um eine dynamische Textanzeige zu erreichen.
abbr[title]:after {
Inhalt: " (" attr(title) ")";
Schriftgröße: kleiner;
Farbe: grau;
} Wenn in diesem Beispiel die Maus über das abbr Element mit dem title bewegt wird, wird eine kleine graue Klammer angezeigt, die den Wert title enthält.
1.4. Komplexe Formen und Animationen implementieren
In Kombination mit content , background , border und anderen Eigenschaften sowie CSS3- transform , transition oder animation können Sie :after verwenden, um komplexe Formen und Animationseffekte zu erstellen.
.button:nach {
Inhalt: "";
Anzeige: Inline-Block;
Breite: 0;
Höhe: 0;
Rand oben: ⅓em durchgehend transparent;
Rand rechts: ⅓em durchsichtig transparent;
border-bottom: ⅓em solid #007BFF;
Rand links: ⅓em durchgehend transparent;
Rand links: 0,½em;
}
.button:hover:after {
transform: translatorY(-0.1em);
Übergang: Transformation 0,2 s Ease-in-out;
} Der obige Code erstellt einen dreieckigen Dropdown-Pfeil nach dem .button Element und implementiert eine sanfte Abwärtsanimation beim Mouseover.
Dinge zu beachten
:after -Pseudoelement muss mit dem content -Attribut verwendet werden, sonst hat es keine Wirkung. Da :after ein erstelltes virtuelles Element ist, können DOM-Operationen nicht über JavaScript ausgeführt werden. Obwohl der von :after generierte Inhalt am Layout teilnehmen kann, ist er nicht im DOM enthalten, hat keinen Einfluss auf die Semantik und hat keinen Einfluss auf Barrierefreiheitsfunktionen wie die Tastaturnavigation.
Zusammenfassend lässt sich sagen, dass CSS3-Pseudoelementselektoren die Ausdruckskraft des Webdesigns erheblich bereichern, indem sie benutzerdefinierte Inhalte nach Elementinhalten einfügen, ohne die HTML-Struktur zu ändern. Der kompetente Einsatz von Pseudoelementen und anderen CSS-Techniken kann Entwicklern dabei helfen, schönere, reaktionsschnellere und einfacher zu wartende Weboberflächen zu erstellen.
2. :first-line und :first-letter
Der Pseudoelementselektor :first-line wird zum Formatieren der ersten Textzeile innerhalb des Elements verwendet, während das Pseudoelement :first-letter zum Formatieren des ersten Buchstabens innerhalb des Elements verwendet wird.
Grammatik :
Selektor:erste Zeile {
/* Stildeklaration */
}
Selektor: Erstbuchstabe {
/* Stildeklaration */
}Anwendungsbeispiele :
Einzug der ersten Zeile:
Artikel p:erste Zeile {
Texteinzug: 2em;
}Groß- und Kleinschreibung:
Artikel h2:Anfangsbuchstabe {
Schriftgröße: 2em;
schweben: links;
Rand rechts: 0,5em;
Zeilenhöhe: 0,8;
Farbe: #8A2BE2;
Hintergrundfarbe: #F8F8FF;
Polsterung: 0,⅔em 0,⅓em;
Randradius: 0,5em;
}Der CSS3-Pseudoklassenselektor ist ein leistungsstarkes Tool, mit dem Entwickler Stile basierend auf dem Status eines Elements und nicht auf seiner Position im Dokumentbaum oder inhärenten Attributen wie Klasse und ID präzise positionieren und anwenden können. Diese Selektoren verwenden spezielle Syntaxstrukturen, um verschiedene bedingte Zustände von Elementen zu beschreiben, wie z. B. Benutzerinteraktion, Positionsbeziehungen, Inhaltsmerkmale usw., und erreichen so ein dynamisches und reaktionsfähiges Webdesign. Nachfolgend finden Sie eine detaillierte Erläuterung der CSS3-Pseudoklassenselektoren und Beispiele ihrer praktischen Anwendungen.
1. Statischer Pseudoklassenselektor
:link und :visited
:link : Wird verwendet, um Hyperlinks ( <a> -Elemente) auszuwählen, die vom Benutzer nicht besucht wurden. Wird normalerweise zum Festlegen grundlegender Stile für nicht besuchte Links verwendet.
a:link {
Farbe: blau;
Textdekoration: keine;
} :visited : Wählen Sie Links aus, die der Benutzer besucht hat. Wird verwendet, um differenzierte Stile für besuchte Links festzulegen.
a:besucht {
Farbe: lila;
} 2. Pseudoklassenselektoren für Benutzerinteraktionen :hover , :focus , :active
:hover : Entspricht einem Element, wenn sich der Mauszeiger darüber befindet.
button:hover {
Hintergrundfarbe: #f0f0f0;
Cursor: Zeiger;
} :focus : Wählen Sie das Element aus, das den Fokus erhält. Dies ist häufig in Formularsteuerelementen oder fokussierbaren Elementen zu finden (z. B. <input> , <textarea> , <button> usw.).
Eingabe:Fokus {
Umriss: 2px solide #007BFF;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
} :active : Wird verwendet, um anzuzeigen, dass der Benutzer ein Element aktiviert oder drückt (normalerweise durch einen Mausklick oder einen Druck auf einem Touchscreen).
a:aktiv {
Farbe: rot;
Schriftstärke: fett;
} 3. Strukturierte Pseudoklassenselektoren :first-child , :last-child , :only-child , :nth-child(n) usw.
:first-child : Wählt das Element aus, das das erste untergeordnete Element seines übergeordneten Elements ist.
li:first-child {
Listenstiltyp: Quadrat;
} :last-child : Wählt das Element aus, das das letzte untergeordnete Element seines übergeordneten Elements ist.
div > p:last-child {
Rand unten: 0;
} :only-child : Elemente auswählen, die keine Geschwister haben.
.message:only-child {
Randbreite: 2px;
} :nth-child(n) : Wählen Sie das n-te untergeordnete Element seines übergeordneten Elements aus, wobei n eine Zahl, ein Schlüsselwort ( even , odd ) oder eine Formel (z. B. 2n+1 ) sein kann.
li:nth-child(2n) {
Hintergrundfarbe: #f9f9f9;
}4. Inhaltsbezogene Pseudoklassenselektoren
:empty , :target , :enabled , :disabled , :checked usw.
:empty : Elemente ohne Inhalt auswählen (einschließlich untergeordneter Elemente, Textknoten usw.).
div.empty:empty {
Anzeige: keine;
} :target : Wählen Sie das Element aus, dessen aktuelle URL-Fragment-ID (Hash) mit der Element-ID übereinstimmt.
#content:target {
Hintergrundfarbe: hellgelb;
} :enabled und :disabled: Wählen Sie die Formularelemente im aktivierten bzw. deaktivierten Zustand aus.
Eingabe:aktiviert {
Hintergrundfarbe: weiß;
}
Eingabe:deaktiviert {
Deckkraft: 0,6;
Cursor: nicht erlaubt;
} :checked : Wird verwendet, wenn ein Kontrollkästchen ( <input type="checkbox"> ), ein Optionsfeld ( <input type="radio"> ) oder ein <option> -Element ausgewählt ist.
input[type="checkbox"]:checked + label {
Textdekoration: durchgestrichen;
}5. Pseudoklassenselektoren negieren
:not(selector)
:not() : Wählt Elemente aus, die nicht mit dem in Klammern angegebenen Selektor übereinstimmen.
/* Außer allen Absätzen mit der Klasse „exclude“ */
p:not(.exclude) {
Farbe: grün;
}6. Andere Pseudoklassenselektoren
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type usw.
:root : Wählen Sie das Stammelement des Dokuments aus (normalerweise das <html> -Element in HTML-Dokumenten).
:Wurzel {
--primary-color: #3498db;
} :nth-of-type(n) und :nth-last-of-type(n): Ähnlich wie :nth-child(n) , jedoch nur für untergeordnete Elemente eines bestimmten Typs unter Geschwisterelementen.
Artikel:nth-of-type(even) {
Hintergrundfarbe: #f5f5f5;
} :first-of-type , :last-of-type und :only-of-type: wählen jeweils das erste, letzte oder einzige untergeordnete Element eines bestimmten Typs unter den Geschwisterelementen aus.
div > p:first-of-type {
Schriftstärke: fett;
}Durch die Beherrschung der oben genannten CSS3-Pseudoklassenselektoren und ihrer Anwendungsszenarien können Entwickler effizienteren, ausdrucksstärkeren und interaktiveren CSS-Code schreiben, um das Benutzererlebnis und die visuellen Effekte der Website zu verbessern. Während sich der CSS-Standard weiterentwickelt, werden möglicherweise weitere neue Pseudoklassenselektoren in die Reihen von CSS3 aufgenommen, um umfangreichere und ausgefeiltere Steuerungsmethoden für die Front-End-Entwicklung bereitzustellen.
Unabhängig davon, ob es sich um eine Pseudoklasse oder ein Pseudoelement handelt, sind sie alle darauf ausgelegt, die Funktionalität von CSS-Selektoren zu verbessern und es Entwicklern zu ermöglichen, den Stil und das Layout von Elementen genauer zu steuern, ohne die HTML-Struktur zu ändern.
Damit ist dieser Artikel über die Unterschiede, detaillierten Erklärungen und Anwendungsbeispiele von CSS3-Pseudoelementen und Pseudoklassenselektoren abgeschlossen. Weitere Informationen zu CSS3-Pseudoelementen und Pseudoklassenselektoren finden Sie in früheren Artikeln auf downcodes.com oder stöbern Sie weiter. Verwandte Artikel unten. Ich hoffe, Sie werden downcodes.com in Zukunft unterstützen!