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)。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效