Was sind die Front-End-Pseudoklassenselektoren?

Zu den Front-End-Pseudoklassenselektoren gehören:hover, :active, :focus, :first-child, :last-child, :nth-child(), :nth-of-type() und :not(), usw. Ausführliche Einführung: 1. Der Pseudoklassenselektor :hover wird verwendet, um Stile anzuwenden, wenn die Maus über einem Element schwebt. Er wird oft verwendet, um interaktive Effekte zu erzeugen, wie zum Beispiel das Ändern seiner Farbe oder seines Hintergrunds, wenn die Maus über einem Link schwebt ; 2. :aktive Pseudoklassen-Klassenselektoren werden verwendet, um Stile anzuwenden, wenn ein Element aktiviert ist usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Front-End-Pseudoklassenselektoren sind ein sehr wichtiger Bestandteil von CSS. Sie ermöglichen es uns, Stile basierend auf dem Status oder der Position von Elementen auszuwählen und anzuwenden. In diesem Artikel stellen wir einige gängige Front-End-Pseudoklassenselektoren vor.

1. :hover-Pseudoklassenselektor

:hover-Pseudoklassenselektor wird verwendet, um Stile anzuwenden, wenn sich die Maus über dem Element befindet. Es wird häufig zum Erstellen interaktiver Effekte verwendet, z. B. zum Ändern der Farbe oder des Hintergrunds eines Links, wenn die Maus darüber bewegt wird.

Beispiel:

a:hover {
  color: blue;
}

2:aktiver Pseudoklassenselektor

:aktiver Pseudoklassenselektor wird verwendet, um Stile anzuwenden, wenn das Element aktiviert ist. Es wird häufig für Klickeffekte auf Schaltflächen oder Links verwendet, z. B. zum Ändern der Farbe oder des Hintergrunds einer Schaltfläche, wenn der Benutzer darauf klickt.

Beispiel:

button:active {
  background-color: yellow;
}

3 :Focus-Pseudoklassenselektor

:Focus-Pseudoklassenselektor wird verwendet, um Stile anzuwenden, wenn ein Element den Fokus erhält. Es wird häufig für Formularelemente verwendet, z. B. zum Ändern der Rahmenfarbe oder des Hintergrunds eines Eingabefelds, wenn der Benutzer darauf klickt.

Beispiel:

input:focus {
  border-color: red;
}

4: Pseudoklassenselektor für das erste Kind

: Pseudoklassenselektor für das erste Kind wird verwendet, um das erste untergeordnete Element des übergeordneten Elements auszuwählen. Es wird häufig verwendet, um dem ersten Element in einer Liste einen speziellen Stil zuzuweisen.

Beispiel:

ul li:first-child {
  font-weight: bold;
}

5: Last-Child-Pseudoklassenselektor

: Last-Child-Pseudoklassenselektor wird verwendet, um das letzte untergeordnete Element des übergeordneten Elements auszuwählen. Es wird häufig verwendet, um dem letzten Element einer Liste einen speziellen Stil zuzuweisen.

Beispiel:

ul li:last-child {
  color: red;
}

6. :nth-child() Pseudoklassenselektor

:nth-child() Pseudoklassenselektor wird verwendet, um untergeordnete Elemente an einer bestimmten Position des übergeordneten Elements auszuwählen. Es kann einen Parameter akzeptieren, der die Position des auszuwählenden untergeordneten Elements angibt.

Beispiel:

ul li:nth-child(odd) {
  background-color: lightgray;
}

7. :nth-of-type() Pseudoklassenselektor

:nth-of-type() Pseudoklassenselektor wird verwendet, um untergeordnete Elemente eines bestimmten Typs eines übergeordneten Elements auszuwählen. Es kann einen Parameter akzeptieren, der die Position des auszuwählenden untergeordneten Elements angibt.

Beispiel:

ul li:nth-of-type(2n) {
  color: blue;
}

8. Der Pseudoklassenselektor :not() wird verwendet, um Elemente auszuwählen, die die angegebenen Bedingungen nicht erfüllen. Es kann einen Parameter akzeptieren, der die auszuschließenden Elemente angibt.

Beispiel:

input:not([type="text"]) {
  display: none;
}

Dies sind gängige Pseudoklassenselektoren im Frontend. Sie können uns dabei helfen, Stile basierend auf dem Status oder der Position von Elementen auszuwählen und anzuwenden. Durch die flexible Verwendung dieser Pseudoklassenselektoren können wir Webseiten mehr interaktive Effekte und personalisierte Stile hinzufügen.

Das obige ist der detaillierte Inhalt vonWas sind die Front-End-Pseudoklassenselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!