Alles über CSS-Pseudoklassen und -Elemente und ihre Anwendungsfälle

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.

Was ist eine Pseudoklasse?

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:

• Wenn jemand mit der Maus über eine Schaltfläche fährt (:hover)
• Wenn ein Formularfeld zur Eingabe ausgewählt ist (:focus)
• Wenn ein Element das erste oder letzte untergeordnete Element in einer Liste ist

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:

• Hover – Wenn der Benutzer mit der Maus über ein Element fährt
• :focus – Wenn ein Benutzer ein Feld auswählt (z. B. ein Textfeld in einem Formular)
• :nth-child(n) – Wenn Sie ein bestimmtes Element in einer Liste oder einem Raster formatieren möchten.
• :disabled – Wenn ein Element (wie eine Schaltfläche) deaktiviert ist und nicht angeklickt werden kann.

Was sind Pseudoelemente?

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.

Warum Pseudoklassen und Pseudoelemente?

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:

• Pseudoklassen helfen dabei, Interaktionen wie Hover-Effekte, fokussierte Eingabefelder oder Stile basierend auf einer Listenposition zu erstellen.
• Pseudo-Elemente ermöglichen es, bestimmte Teile eines Elements zu gestalten oder dekorative Inhalte wie Symbole oder Symbole vor oder nach einem Element hinzuzufügen.

Browser-Unterstützung

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

Abschluss

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!