Was sind die Front-End-Pseudoklassenselektoren?

百草
Freigeben: 2023-10-13 17:12:39
Original
1347 Leute haben es durchsucht

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.

Was sind die Front-End-Pseudoklassenselektoren?

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage