Internet Explorer IE7 + IE8在逗号分隔的选择器列表中忽略带有nth-child的CSS规则

Question

我只花了一个小时调试IE7和IE8中出现的一个奇怪的CSS错误,想分享我的发现:

问题:为什么IE7/IE8没有采用后面的规则并覆盖前一个规则？

示例标记如下所示:

<table>
    <caption>Things on planet Earth</caption>
    <tbody>
        <tr class="odd"><td>Monkeys</td></tr>
        <tr><td>Tennis</td></tr>
        <tr class="odd"><td>Fridge Magnets</td></tr>
        <tr><td>Humous</td></tr>
    </tbody>
</table>

简化的示例CSS如下所示:

tr.odd{
    background-color: red;
}

tr.odd, div:nth-child(odd){
    background-color: blue;
}

Chrome,FF和IE9 +按预期呈现蓝色类为"奇数"的表行,因为将其设置为蓝色的规则发生在文档的后面,具有相同的特异性.但IE7和IE8将它们呈现为红色!那么为什么IE不应用第二条规则呢？

Answer 1

因为IE7(2006年发布)和IE8(2009年发布)不理解nth-child(添加到CSS 2010),他们似乎将第二个规则中的第二个选择器视为错误.它的回应是忽略整个规则,包括它认为有效的其他选择器.尽管nth-child被附加到不同的选择器.开发人员忽略整个规则是一个奇怪的决定,而不仅仅是它认为无效的选择器.

按如下方式重写CSS会将IE7/IE8之后添加的选择器与以前存在的选择器分开,从而解决问题:

tr.odd{
    background-color: red;
}

tr.odd{
    background-color: blue;
}

/* IE7 and IE8 will ignore this entire rule */
div:nth-child(odd){
    background-color: blue;
}

注意:请不要聪明,建议删除第一条规则.显然,在这样一个煮沸的例子中,它是多余的,但这是一个巨大的项目的大幅截断版本,其中连接到文档末尾的CSS需要覆盖以前的规则.