IE8 不尊重 CSS 规则覆盖答案

【问题标题】：IE8 doesn't respect CSS rule overridingIE8 不尊重 CSS 规则覆盖
【发布时间】：2014-06-28 02:17:50
【问题描述】：

我在过去 2 个小时里一直在解决这个问题，但我不知道出了什么问题以及如何解决它。

让我们假设以下 HTML：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IE8 test</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div id="myDiv">
        <p>First line - bla bla bla bla bla bla bla bla bla</p>
        <p>Second line - bla bla bla bla bla bla bla bla bla</p>
        <p class="red last">Third line - bla bla bla bla bla bla bla bla bla</p>
    </div>
</body>
</html>

还有这个 CSS：

@charset "UTF-8";

#myDiv {
    border: 1px solid green;
}

#myDiv p {
    text-align: center;
}

#myDiv p:first-child {
    text-align: left;
}

#myDiv p.last, #myDiv p:last-child { /* THIS IS WHAT DOESN'T WORK IN IE8 */
    text-align: right;
}

.red {
    color: red;
}

显然，这应该使 div 中的所有文本居中，然后将第一行放在左边，最后一行放在右边。它在较新的浏览器中完美运行，但 IE8 失败（哦，真是令人惊讶……）。

似乎不尊重#myDiv p.last, #myDiv p:last-child。我添加了class="last"，因为IE8 不知道last-child，但无论如何，text-align:center 根本不会被text-align:right 覆盖。有人知道如何解决吗？我真的需要让它在 IE8 中工作。非常感谢！

【问题讨论】：

@raina77ow 天哪，你是对的，我不敢相信我浪费了这么多时间！非常感谢，请将此添加为答案，以便我接受。

标签： html css internet-explorer-8 overriding css-selectors

【解决方案1】：

您应该在选择器中只留下#myDiv p.last。由于 IE8 无法识别 :last-child 选择器表达式，它只是忽略了整个规则（可能无效）。

这是一般的经验法则（由the standard 规定）：浏览器无法理解选择器 => 浏览器会忽略它（以及相应的规则）。

【讨论】：

【解决方案2】：

: IE8 不支持last-child。见这里：http://caniuse.com/#search=last-child

【讨论】：

问题中提到了（=我知道）。我不知道的是，如果使用 last-child，IE 会忽略所有规则。
哎呀。对此感到抱歉，@Fygo - 在离开回答之前应该完整阅读您在此处添加的最后一句。很高兴你解决了。