In CSS ist Pseduo-Klassen und -Elemente ein Schlüsselwort, das einem Selektor hinzugefügt wird und es Ihnen ermöglicht, Elemente basierend auf ihrem Status oder einem bestimmten Teil des Elements zu formatieren.
Zum Beispiel: Sie bewegen den Mauszeiger über ein Ankerelement oder fügen verschiedene Stile hinzu, um zu sehen, ob der Link besucht wird oder nicht, oder Sie können ihn verwenden, um auf den ersten Buchstaben eines Wortes in einem Artikel zu zielen. Und mit diesen Schlüsselwörtern kann noch viel mehr erreicht werden.
Sie werden von allen gängigen Browsern weitgehend unterstützt und sind seit ihren frühen Versionen Teil des CSS.
Eine Pseudoklasse ist wie das Erstellen einer Regel, die auf ein Element basierend auf einer bestimmten Bedingung oder einem bestimmten Zustand angewendet wird.
Pseudoklassen werden verwendet, wenn sich der Zustand eines Elements aufgrund der Art und Weise ändert, wie der Benutzer damit interagiert. Zum Beispiel:
Verstehen wir es anhand eines Beispiels:
a:hover {
color: blue;
}
a:visited {
color: navyblue;
}
Dieses Beispiel zeigt zwei verschiedene Zustände des Ankerelements. Wenn ein Benutzer mit der Maus über ein Ankerelement fährt, ändert sich die Textfarbe in Blau, zeigt jedoch eine andere Standardfarbe an, wenn der Benutzer bereits durch Klicken auf dieses Ankerelement die Seite besucht hat.
Pseduo-Klassen können durch einen einzelnen Doppelpunkt dargestellt werden: am Anfang des Schlüsselwortnamens. Hier ist eine Liste einiger gängiger Pseudoklassen:
Pseudoelemente unterscheiden sich von Pseudoklassen, da sie auf bestimmte Teile eines Elements und nicht auf das Ganze abzielen. Damit können Sie bestimmte Teile eines Elements gestalten oder Dinge einfügen, auf die Sie normalerweise keinen direkten Zugriff haben.
Beispiel für Pseudoelemente:
p::first-letter { /* Accessing the first-letter of paragraph and adding style. */
font-size: 2em;
font-weight: bold;
color: red;
}
Dieses Beispiel zeigt, wie man auf den Anfangsbuchstaben eines Absatzes zugreift und unsere Stile mithilfe von CSS anwendet.
Vielleicht ist Ihnen eines aufgefallen, nämlich die Verwendung des doppelten Doppelpunkts :: für Pseudoelemente, während der Doppelpunkt : für Pseudoklassen verwendet wird. Dies ist die tatsächliche Darstellung der Syntax für beide.
Mit diesen Tools können wir einige ziemlich coole Dinge in CSS tun, ohne eine Menge zusätzlichen HTML- oder JavaScript-Code schreiben zu müssen. Sie geben Ihnen mehr Kontrolle über Ihr Design und machen Ihre Website mit nur wenigen CSS-Zeilen interaktiver und dynamischer.
So können Sie zwischen beiden unterscheiden und Ihnen bei der Auswahl des richtigen Werkzeugs helfen:
Pseudoelemente und Pseudoklassen werden in allen gängigen Browsern unterstützt, aber mit dem Wachstum des Webs werden neue Schlüsselwörter hinzugefügt, die keine Standardunterstützung für sie bieten. Daher müssen wir Browser-Präfixe verwenden, um diese Probleme zu beheben.
Zum Beispiel werden neuere Pseudoklassen wie :not() in älteren Browsern nicht unterstützt, daher verhält es sich anders. Sie sollten immer mit dem Online-Tool Caniuse.com prüfen, welche Eigenschaft bei welcher Browserversion unterstützt wird
In CSS fungieren Pseudoklassen und Pseudoelemente als Ihre Geheimwaffen zum Entwerfen von Websites, die sich lebendig und schön anfühlen, ohne jede Menge zusätzlichen Code hinzuzufügen. Sie helfen Ihnen dabei, Elemente basierend auf Interaktion oder Zustand zu gestalten (Pseudoklassen) oder auf bestimmte Teile eines Elements abzuzielen (Pseudoelemente).
Dieser Blog wurde ursprünglich auf der Website Programmingly.dev veröffentlicht. Lesen Sie den vollständigen Artikel, indem Sie diesem Link folgen
Das obige ist der detaillierte Inhalt vonAlles über CSS-Pseudoklassen und -Elemente und ihre Anwendungsfälle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
