IE8：nth-​​child和：before [英] IE8 :nth-child and :before

问题描述

这是我的CSS：

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

无处不在现在（使用这在我的网站）除了Internet Explorer 8 ...

Works everywhere now (used this on my website) except Internet Explorer 8...

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

Is there possibly a way to use nth-child in IE8? This is the worst version of this browser... nothing works as it should and I can't find a way to fix it.

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

@edit: Simplified version of what I want to achieve: http://jsfiddle.net/LvvNL/. Its just a start. CSS will be more complicated so I need to be able to aim every one of this links. Hope adding classes to every link is not the only way

@ edit2：
我刚刚注意到

@edit2: I've just noticed that

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

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

IS actually working in IE8! But this:

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

无效。那么是怎么回事？

is NOT working. So what is going on?

推荐答案

你可以使用相邻兄弟组合器（ + ）来实现这一功能。

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in 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例如：nth-​​child（odd）或：nth-​​child（4n + 3）使用此方法。

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

这篇关于IE8：nth-​​child和：before的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！