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
Susan SarandonOriginal
2024-12-15 01:36:10326Durchsuche

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!

Stellungnahme:
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