css – IE8：nth-​​child和：before

这里是我的CSS：

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

现在无处不在(在我的网站上使用this)，除了Internet Explorer 8 …

有可能有一种方法在IE8中使用nth-child吗？
这是这个浏览器的最糟糕的版本…没有什么工作，因为它应该，我找不到一种方法来解决它。

@编辑：
我想实现的简化版本：http://jsfiddle.net/LvvNL/.它只是一个开始。 CSS将更复杂，所以我需要能够瞄准每一个这个链接。希望为每个链接添加类不是唯一的方法

@ edit2：
我刚才注意到了

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

IS实际上在IE8工作！但是这个：

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

不管用。那么发生了什么？

解决方法

你可以(ab)使用 adjacent sibling combinator (+)来实现这一点的CSS在IE7 / 8。

参见：http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}​

您不能使用此方法模拟以下更复杂的变体：nth-​​child()，例如：nth-​​child(odd)或：nth-​​child(4n 3)。

原文地址：https://www.jb51.cc/css/223507.html