css - Internet Explorer IE7 + IE8 忽略逗号分隔选择器列表中第 n 个子项的 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)，它们似乎将第二条规则中的第二个选择器视为错误。它的 react 是忽略整个规则，包括它认为有效的其他选择器。尽管第 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 连接到文档的末尾需要覆盖以前的规则。