Heim > Web-Frontend > CSS-Tutorial > Wie formatiere ich „a:before' mit „:hover'- und „:visited'-Pseudoklassen?

Wie formatiere ich „a:before' mit „:hover'- und „:visited'-Pseudoklassen?

Susan Sarandon
Freigeben: 2024-12-15 01:36:10
Original
325 Leute haben es durchsucht

How to Style `a:before` with `:hover` and `:visited` Pseudo-classes?

Adressierung des Aufrufs von „a:before“ mit „:hover“- und „:visited“-Bedingungen

Die Unfähigkeit, „ a:before:hover' basiert auf einem grundlegenden Verständnis der CSS-Syntax. Um Stile ordnungsgemäß auf ein „a:before“-Pseudoelement anzuwenden, wenn ein „a“-Element mit einer Pseudoklasse übereinstimmt, sollte das Format „a:hover:before“ oder „a:visited:before“ sein. Dies bedeutet, dass das Pseudoelement nach der Pseudoklasse im Selektor steht.

In CSS3 ist die Verwendung von Doppelpunkten (z. B. 'a:hover::before' oder 'a:visited::before ') verbessert die Klarheit bei der Unterscheidung von Pseudoklassen und Pseudoelementen. Für ältere Browser wie IE8 und niedriger sind jedoch einzelne Doppelpunkte ausreichend.

Die Reihenfolge der Pseudoklassen und Pseudoelemente ist in der Spezifikation streng definiert. Ein Pseudoelement kann nur an das Ende einer einfachen Selektorsequenz angehängt werden, bei der es sich um eine Kette von Selektoren ohne Kombinatoren handelt. Ein einfacher Selektor umfasst Typselektoren, universelle Selektoren, Attributselektoren, Klassenselektoren, ID-Selektoren und Pseudoklassen. Während Pseudoklassen einfache Selektoren sind, sind es Pseudoelemente nicht.

Wenn jedoch bei Pseudoklassen mit Benutzeraktion wie „:hover“ der gewünschte Effekt auf die Benutzerinteraktion mit dem Pseudoelement beschränkt ist, Dies ist derzeit mit Standard-CSS nicht möglich. Stattdessen muss „:hover“ auf ein tatsächliches untergeordnetes Element angewendet werden.

Das obige ist der detaillierte Inhalt vonWie formatiere ich „a:before' mit „:hover'- und „:visited'-Pseudoklassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage