Wie gezielt bestimmte Elemente in einer Liste mithilfe von nth-child in IE8 ansprechen?

Nth-Child und :before in IE8

Die Möglichkeit, nth-child zum Targeting bestimmter Elemente in einer Liste zu verwenden, ist ein leistungsstarkes CSS Funktion, die in Internet Explorer 8 (IE8) leider nicht unterstützt wird. Dies kann bei der Arbeit mit komplexen HTML-Layouts ein erhebliches Hindernis darstellen.

Es gibt jedoch eine Problemumgehung, mit der Sie mithilfe des benachbarten Geschwisterkombinators ( ) eine ähnliche Funktionalität in IE8 erreichen können. Bei diesem Trick geht es darum, das erste untergeordnete Element anzusprechen und dann den Selektor zu verwenden, um nachfolgende Geschwister anzusprechen.

Um beispielsweise das erste untergeordnete Element in einer Liste anzusprechen und ihm einen roten Rahmen zu geben, können wir das folgende CSS verwenden:

#nav-primary ul li:first-child a {
  border-top: 5px solid red;
}

Ähnlich können wir Folgendes verwenden, um das zweite Kind anzusprechen und ihm einen blauen Rand zu geben:

#nav-primary ul li:first-child + li a {
  border-top: 5px solid blue;
}

Diese Technik kann verwendet werden, um bestimmte Elemente basierend auf ihrer Position darin anzusprechen eine Liste, auch wenn :nth-child in IE8 nicht unterstützt wird. Es ist jedoch wichtig zu beachten, dass komplexere Variationen von :nth-child, wie :nth-child(odd) oder :nth-child(4n 3), mit dieser Methode nicht emuliert werden können.

Das obige ist der detaillierte Inhalt vonWie gezielt bestimmte Elemente in einer Liste mithilfe von nth-child in IE8 ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!