Heim häufiges Problem Was sind die Pseudoklassenselektoren?

Was sind die Pseudoklassenselektoren?

Oct 07, 2023 pm 04:20 PM
Pseudo-Klassenselektor

Zu den Pseudoklassenselektoren gehören:hover, :active, :focus, :visited, :link, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :not(selector), :empty, :checked, :disabled usw.

Was sind die Pseudoklassenselektoren?

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

Pseudoklassenselektor ist ein leistungsstarker Selektor in CSS, der zum Auswählen bestimmter Zustände oder Bedingungen von Elementen verwendet wird. Pseudoklassenselektoren beginnen mit einem Doppelpunkt (:) und werden verwendet, um verschiedene Elementzustände auszuwählen, z. B. Mauszeiger, besuchte Links, Elementposition usw. Im Folgenden sind gängige Pseudoklassenselektoren in CSS aufgeführt:

1. :hover: Wählen Sie den Zustand aus, wenn sich die Maus über dem Element befindet. Bestimmte Stile können auf Elemente angewendet werden, wenn der Mauszeiger darüber bewegt wird.

2. :aktiv: Wählen Sie den Zustand aus, in dem das Element aktiviert oder gedrückt ist. Bestimmte Stile können auf Elemente angewendet werden, wenn der Benutzer klickt oder die Maustaste drückt.

3. :focus: Wählen Sie das Element aus, das gerade den Fokus erhält. Bestimmte Stile können auf Elemente angewendet werden, wenn diese ausgewählt sind oder den Fokus haben.

4. :besucht: Wählen Sie den besuchten Link aus. Nachdem ein Benutzer einen Link besucht hat, können Sie bestimmte Stile auf den Link anwenden.

5. :link: Wählen Sie einen nicht besuchten Link. Entspricht der Pseudoklasse :visited, die zur Auswahl nicht besuchter Links verwendet wird.

6. :first-child: Wählen Sie das erste untergeordnete Element des Elements aus. Bestimmte Stile können auf ein Element angewendet werden, wenn es das erste untergeordnete Element seines übergeordneten Elements ist.

7. :last-child: Wählen Sie das letzte untergeordnete Element des Elements aus. Bestimmte Stile können auf ein Element angewendet werden, wenn es das letzte untergeordnete Element seines übergeordneten Elements ist.

8. :nth-child(n): Wählen Sie das n-te untergeordnete Element des Elements aus. Ein bestimmter Stil kann auf ein Element angewendet werden, wenn es das n-te untergeordnete Element seines übergeordneten Elements ist. Dabei kann n eine bestimmte Zahl, ein Schlüsselwort (z. B. gerade, ungerade) oder ein Ausdruck (z. B. 2n, 3n+1) sein.

9. :nth-last-child(n): Wählen Sie das n-te untergeordnete Element am unteren Rand des Elements aus. Ein bestimmter Stil kann auf ein Element angewendet werden, wenn es das n-te untergeordnete Element seines übergeordneten Elements ist.

10. :nth-of-type(n): Wählen Sie das n-te Element unter Elementen desselben Typs aus. Ein bestimmter Stil kann auf ein Element angewendet werden, wenn es das n-te Element seines Typs ist.

11. :nth-last-of-type(n): Wählen Sie das n-te Element vom letzten unter den Elementen desselben Typs aus. Sie können einem Element einen bestimmten Stil zuweisen, wenn es das n-te Element vom letzten seines Typs ist.

12. :not(selector): Elemente auswählen, die nicht mit einem bestimmten Selektor übereinstimmen. Mit diesem Pseudoselektor können Sie bestimmte Elemente ausschließen und andere Elemente auswählen, auf die Stile angewendet werden sollen.

13. :empty: Elemente ohne untergeordnete Elemente auswählen. Bestimmte Stile können auf ein Element angewendet werden, wenn es keine untergeordneten Elemente hat.

14. :markiert: Wählen Sie das ausgewählte Formularelement aus. Gilt für Formularelemente wie Kontrollkästchen, Optionsfelder und Dropdown-Listen.

15. :disabled: Deaktivierte Formularelemente auswählen. Wenn ein Formularelement deaktiviert ist, können bestimmte Stile auf das Element angewendet werden.

Die oben genannten sind gängige Pseudoklassenselektoren in CSS. Sie können Elemente in Webseiten basierend auf dem Status oder den Bedingungen der Elemente auswählen und formatieren. Durch den rationalen Einsatz dieser Pseudoklassenselektoren können wir reichhaltige und vielfältige Effekte erzielen und die Benutzererfahrung und Seitenlesbarkeit verbessern.

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

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was bedeutet Hover in CSS? Was bedeutet Hover in CSS? Feb 22, 2024 pm 01:24 PM

:hover in CSS ist ein Pseudoklassenselektor, der zum Anwenden bestimmter Stile verwendet wird, wenn der Benutzer mit der Maus über ein bestimmtes Element fährt. Wenn Sie mit der Maus über ein Element fahren, können Sie ihm über :hover verschiedene Stile hinzufügen, um das Benutzererlebnis und die Interaktion zu verbessern. In diesem Artikel wird die Bedeutung von Hover ausführlich erläutert und spezifische Codebeispiele aufgeführt. Lassen Sie uns zunächst die grundlegende Verwendung von :hover in CSS verstehen. In CSS können Sie einen Selektor verwenden, um das Element auszuwählen, auf das der :hover-Effekt angewendet werden soll, und danach etwas hinzuzufügen

So entfernen Sie den Punkt vor dem li-Tag in CSS So entfernen Sie den Punkt vor dem li-Tag in CSS Apr 28, 2024 pm 12:36 PM

Es gibt zwei Möglichkeiten, Punkte aus Li-Tags in CSS zu entfernen: 1. Verwenden Sie den Stil „list-style-type: none;“ 2. Verwenden Sie transparente Bilder und „list-style-image: url(„transparent.png“). ; "Stil. Beide Methoden können die Punkte aller Li-Tags entfernen. Wenn Sie nur die Punkte bestimmter Li-Tags entfernen möchten, können Sie einen Pseudoklassenselektor verwenden.

So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist Nov 20, 2023 am 11:52 AM

So verwenden Sie den Pseudoklassenselektor nth-child(-n+5), um den CSS-Stil von untergeordneten Elementen auszuwählen, deren Position kleiner oder gleich 5 ist. In CSS ist der Pseudoklassenselektor ein leistungsstarkes Werkzeug, das dies kann Durch eine bestimmte Auswahlmethode werden bestimmte Elemente in einem HTML-Dokument ausgewählt. Unter diesen ist:nth-child() ein häufig verwendeter Pseudoklassenselektor, der untergeordnete Elemente an bestimmten Positionen auswählen kann. :nth-child(n) kann mit dem n-ten untergeordneten Element in HTML übereinstimmen, und :nth-child(-n) kann übereinstimmen

Die Rolle von Hover in HTML Die Rolle von Hover in HTML Feb 20, 2024 am 08:58 AM

Die Rolle von Hover in HTML und spezifischen Codebeispielen In der Webentwicklung bedeutet Hover, dass bestimmte Aktionen oder Effekte ausgelöst werden, wenn der Benutzer mit dem Cursor über ein Element fährt. Es wird durch die CSS-Pseudoklasse :hover implementiert. In diesem Artikel stellen wir die Rolle des Hovers und spezifische Codebeispiele vor. Erstens ermöglicht Hover einem Element, seinen Stil zu ändern, wenn der Benutzer mit der Maus darüber fährt. Wenn Sie beispielsweise mit der Maus über eine Schaltfläche fahren, können Sie die Hintergrund- oder Textfarbe der Schaltfläche ändern, um den Benutzer daran zu erinnern, was als Nächstes zu tun ist.

Was bedeutet :: in CSS? Was bedeutet :: in CSS? Apr 28, 2024 pm 03:45 PM

Der Pseudoklassenselektor :: in CSS wird verwendet, um einen speziellen Zustand oder ein bestimmtes Verhalten eines Elements anzugeben. Er ist spezifischer als der Pseudoklassenselektor : und kann bestimmte Eigenschaften oder Zustände eines Elements auswählen.

Verwendung der Content-Eigenschaft in CSS Verwendung der Content-Eigenschaft in CSS Feb 19, 2024 am 10:56 AM

Verwendung des Inhaltsattributs in CSS Das Inhaltsattribut in CSS ist ein sehr nützliches Attribut, das zum Einfügen zusätzlicher Inhalte in Pseudoklassen verwendet wird. Das Inhaltsattribut kann im Allgemeinen nur in Pseudoklassenselektoren verwendet werden (z. B. ::before und ::after). Es kann zum Einfügen von Inhalten wie Text oder Bildern verwendet werden. Durch das Inhaltsattribut können wir einige sehr coole Effekte erzielen. Im Folgenden sind einige Verwendungszwecke des Inhaltsattributs und spezifische Codebeispiele aufgeführt: Fügen Sie Textinhalt ein

So verwenden Sie Hover in CSS So verwenden Sie Hover in CSS Feb 23, 2024 pm 12:06 PM

Die Hover-Pseudoklasse in CSS ist ein sehr häufig verwendeter Selektor, der es uns ermöglicht, den Stil eines Elements zu ändern, wenn die Maus darüber fährt. In diesem Artikel wird die Verwendung von Hover vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Grundlegende Verwendung Um Hover zu verwenden, müssen wir zunächst einen Stil für das Element definieren und dann die Pseudoklasse :hover verwenden, um den entsprechenden Stil anzugeben, wenn die Maus darüber schwebt. Zum Beispiel haben wir ein Schaltflächenelement. Wenn die Maus über die Schaltfläche fährt, soll sich die Hintergrundfarbe der Schaltfläche in Rot und die Textfarbe in Weiß ändern.

Verwenden Sie den Pseudoklassenselektor :nth-last-child(2), um den Stil des vorletzten untergeordneten Elements auszuwählen Verwenden Sie den Pseudoklassenselektor :nth-last-child(2), um den Stil des vorletzten untergeordneten Elements auszuwählen Nov 20, 2023 am 11:22 AM

Verwenden Sie den Pseudoklassenselektor :nth-last-child(2), um den Stil des vorletzten untergeordneten Elements auszuwählen. In CSS ist der Pseudoklassenselektor ein sehr leistungsfähiges Werkzeug, das zur Auswahl verwendet werden kann die spezifischen Elemente. Einer davon ist der Pseudoklassenselektor :nth-last-child(2), der das vorletzte untergeordnete Element auswählt und Stile darauf anwendet. Erstellen wir zunächst ein Beispiel-HTML-Dokument, damit wir diesen Pseudoklassenselektor darin verwenden können. von