如何在 Internet Explorer 8 中使用 :nth-child：解決方法

IE8 :nth-child 和 :before: 修復

Internet Explorer 8 因與現代 Web 標準不一致而臭名昭著。開發人員面臨的一個常見問題是缺乏對 CSS nth-child 選擇器的支援。

問題

考慮以下CSS 程式碼：

#nav-primary ul li:nth-child(1) a:after { }

雖然這段程式碼在大多數現代瀏覽器中都能完美運行，但在Internet Explorer中卻神秘地失敗了8.

解決方案

儘管 IE8 帶來了挑戰，但還是有一個解決方法來模擬 :nth-child 功能。透過利用相鄰同級組合器 ( )，您可以定位序列中的特定元素：

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

使用此方法，您可以模擬 :nth-child 的基本變體。然而，更複雜的變體，如 :nth-child(odd) 或 :nth-child(4n 3) 無法使用此方法複製。

注意： 雖然此解決方法解決了以下問題將樣式應用於序列中的特定元素，它可能無法完全複製:nth-child 的行為，並且可能會在更複雜的場景中導致意想不到的後果。

以上是如何在 Internet Explorer 8 中使用 :nth-child：解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！