如何在 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中文网其他相关文章！