如何在 IE8 中使用 :nth-child 和 :before 設定元素樣式？

IE8 中:nth-child 和:before 的瀏覽器相容性限制

Internet Explorer 8 (IE8) 帶來了獨特的挑戰實現CSS 偽元素，如:nth-child 和:before。雖然這些選擇器在現代瀏覽器中得到廣泛支持，但它們在 IE8 中存在局限性。

使用 :nth-child 設定清單中特定元素的樣式時會出現這樣的問題。如 CSS 程式碼段所示，選擇器 #nav-primary ul li:nth-child(1) a:after 將樣式套用於第一個清單項目錨標記的 after 偽元素。然而，這個選擇器在 IE8 中無法正常運作。

使用相鄰同級組合器的替代方法

要規避此限制，可以使用相鄰同級組合器( )與第一個子偽類。此方法透過使用以下CSS 結構定位第一個子級的後續兄弟姐妹，有效地實現了相同的結果：

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

此方法有效地模擬:nth-child(1), :nth -child( 的行為2) 等等。然而，它的缺點是不支援更複雜的 :nth-child() 變體，例如 :nth-child(odd) 或 :nth-child(4n 3)。

以上是如何在 IE8 中使用 :nth-child 和 :before 設定元素樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！