CSS führt die Konzepte von Pseudoklassen und Pseudoelementen ein, um Informationen über den Dokumentbaum hinaus zu formatieren. Mit anderen Worten: Pseudoklassen und Pseudoelemente werden verwendet, um Teile zu ändern, die sich nicht im Dokumentbaum befinden, z. B. den ersten Buchstaben in einem Satz oder das erste Element in einer Liste oder wenn die Maus über einem bestimmten Element schwebt Der Stil, der festgelegt werden soll, wenn der Hyperlink aktiviert ist.
Was sind Pseudoelemente?
Pseudoelemente: werden verwendet, um einige Elemente zu erstellen, die sich nicht im Dokumentbaum befinden, und ihnen Stile hinzuzufügen. Tatsächlich handelt es sich bei Pseudoelementen um Dinge, die normale Selektoren vor oder nach bestimmten Elementen nicht ausführen können. Der Inhalt des Steuerelements ist derselbe wie das Element, es handelt sich jedoch selbst um eine elementbasierte Abstraktion und ist in der Dokumentstruktur nicht vorhanden. Beispielsweise können wir :before verwenden, um Text vor einem Element einzufügen und diesem Text Stile hinzuzufügen.
Elementeigenschaften
1. Vorteile:
(1) Belegen Sie keine DOM-Knoten und reduzieren Sie die Anzahl der DOM-Knoten.
(2) Lassen Sie CSS dabei helfen, einige JavaScript-Probleme zu lösen und die Entwicklung zu vereinfachen.
(3) Vermeiden Sie das Hinzufügen bedeutungsloser Seitenelemente.
2. Nachteile:
(1) Nicht förderlich für das Debuggen.
(2) Pseudoelemente spiegeln sich nicht wirklich im Inhalt des Dokuments wider, sondern nur im visuellen Effekt, sodass Sie den Pseudoelementen keinen praktischen Inhalt hinzufügen können und dieser Teil des Inhalts nicht von Suchmaschinen gecrawlt wird.
CSS stellt eine Reihe von Pseudoelementen bereit, wie in der folgenden Tabelle dargestellt:
1. ::nachher
Das Pseudoelement::after kann einige Inhalte nach dem angegebenen Element einfügen. In ::after müssen Sie das Inhaltsattribut verwenden, um den anzufügenden Inhalt zu definieren, und in ::after müssen Sie das Inhaltsattribut definieren, damit es wirksam wird (Es muss kein Inhalt eingefügt werden. Der Wert des Inhaltsattributs kann als leer definiert werden.)
2. ::vorher
Das Pseudoelement::before kann Inhalte vor dem angegebenen Element einfügen. Ähnlich wie bei ::after muss das Inhaltsattribut auch in ::before verwendet werden, um den anzufügenden Inhalt zu definieren, und das Inhaltsattribut muss in ::before definiert werden, damit es wirksam wird (wenn kein Inhalt eingefügt werden muss, Der Wert des Inhaltsattributs kann als Null definiert werden.
3. ::erster Buchstabe
Pseudoelement::first-letter wird verwendet, um den Stil des ersten Zeichens des Inhalts im angegebenen Element festzulegen. Es wird normalerweise mit den Attributen „font-size“ und „float“ verwendet, um einen Drop-Cap-Effekt zu erzeugen. Es ist zu beachten, dass das Pseudoelement ::first-letter nur für Elemente auf Blockebene verwendet werden kann. Wenn Inline-Elemente dieses Pseudoelement verwenden möchten, müssen sie zunächst in Elemente auf Blockebene konvertiert werden.
4. ::erste Zeile
Das Pseudoelement::first-line wird verwendet, um den Stil der ersten Inhaltszeile im angegebenen Element festzulegen. Ähnlich wie bei ::first-letter kann das Pseudoelement::first-line nur für Elemente auf Blockebene verwendet werden Wenn Inline-Elemente dieses Pseudoelement verwenden möchten, müssen Sie es zunächst in ein Element auf Blockebene konvertieren.
5. ::Auswahl
Pseudoelement::selection wird verwendet, um den Stil festzulegen, wenn das Objekt ausgewählt ist. Es ist zu beachten, dass das Pseudoelement::selection nur Farbe, Hintergrund, Cursor, Umriss und Textschatten definieren kann, wenn das Element ausgewählt ist (IE11). unterstützt es noch nicht (Definieren Sie dieses Attribut) und andere Attribute.
6. ::Platzhalter
Pseudoelement::placeholder wird verwendet, um den Platzhaltertext (durch das Platzhalterattribut von HTML festgelegter Text) von Formularelementen (Elemente <input>, <textarea>) festzulegen.