IE8：nth-​​child和：before

Question

这是我的CSS：

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

工作，现在到处（用这个在我的网站），除了Internet Explorer
8中......

是否有可能在IE8中使用nth-child？这是该浏览器的最差版本，无法正常工作，我找不到解决方法。

@ edit2：我刚刚注意到

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

实际上是在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;
}

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

Answer 1

您可以（ab）使用相邻的同级组合器（+）通过可在IE7/ 8中使用的CSS来实现此目的。

/* 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)用此方法。