Wie formatiere ich Elemente mit :nth-child und :before in IE8?

Browserkompatibilitätseinschränkungen für :nth-child und :before in IE8

Internet Explorer 8 (IE8) stellt eine einzigartige Herausforderung dar zur Implementierung von CSS-Pseudoelementen wie :nth-child und :before. Während diese Selektoren in modernen Browsern weitgehend unterstützt werden, weisen sie in IE8 Einschränkungen auf.

Ein solches Problem tritt auf, wenn :nth-child verwendet wird, um bestimmte Elemente innerhalb einer Liste zu formatieren. Wie das CSS-Snippet zeigt, wendet der Selektor #nav-primary ul li:nth-child(1) a:after Stile auf das After-Pseudoelement des Ankertags des ersten Listenelements an. Allerdings funktioniert dieser Selektor in IE8 nicht richtig.

Alternativer Ansatz mit dem Kombinator für benachbarte Geschwister

Um diese Einschränkung zu umgehen, kann man den Kombinator für benachbarte Geschwister ( ) entlang verwenden mit der Erstkind-Pseudoklasse. Dieser Ansatz erzielt effektiv das gleiche Ergebnis, indem er mithilfe der folgenden CSS-Struktur auf nachfolgende Geschwister des ersten Kindes abzielt:

#nav-primary ul li:first-child a { ... }
#nav-primary ul li:first-child + li a { ... }
#nav-primary ul li:first-child + li + li a { ... }

Diese Methode emuliert effektiv das Verhalten von :nth-child(1), :nth-child( 2) und so weiter. Es hat jedoch den Nachteil, dass komplexere Varianten von :nth-child() wie :nth-child(odd) oder :nth-child(4n 3) nicht unterstützt werden.

Das obige ist der detaillierte Inhalt vonWie formatiere ich Elemente mit :nth-child und :before in IE8?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!