IE8：nth-​​child和：之前

Question

这是我的CSS：

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

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

是否有可能在IE8中使用nth-child？ 这是这个浏览器中最糟糕的版本...没有任何效果，我找不到解决方法。

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

@ 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）使用adjacent sibling combinator (+)来实现这一点，使用适用于IE7 / 8的CSS。

请参阅： 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)。

Answer 2

IE9.js解决了这个问题和其他相关问题！

:nth-child(odd)和:nth-child(even)可以使用此功能。

用法：

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Answer 3

尝试将Selectivizr与NMWatcher配对。这就是我在所有网站上所做的，以便在所有浏览器中获得良好的伪选择器支持。如果你使用了很多HTML5元素，那么它可能值得使用NMWatcher的v 1.2.3而不是1.2.4，我今天有一个网站的选择性问题我似乎无法修复，然后我搬了到1.2.3，它工作正常。

Answer 4

IE8（及以下）doesn't support :nth-child()，但 支持:after。但是，因为您在选择器:nth-child()之前使用:after，IE8将无法运行它。

您可以通过向该行添加类或使用添加对这些选择器的支持的库来使用JavaScript解决方案。

Answer 5

你可以使用：first-child而不是：nth-​​child（1）这在IE7 +中有更好的支持

另见http://quirksmode.org/css/firstchild.html

Answer 6

ie9.js听起来像是最好的解决方案，但你也可以在细胞中添加一个类，例如

<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>

.first-cell {
    font-weight: bold;
}
.second-cell {
    font-weight: normal;
}