CSS 的奇怪行为：first-child:before 在 Chrome答案

【问题标题】：Odd Behavior with CSS :first-child:before in ChromeCSS 的奇怪行为：first-child:before 在 Chrome
【发布时间】：2011-07-29 04:50:11
【问题描述】：

我在带有 :first-child:before 的 Chrome 10 中看到了一些相当奇怪的东西。

有了这个 HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Siz</li>
</ul>

还有这个 CSS

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child:before {
    content: ""
}

谁能解释为什么<li>Four</li> 在 Win XP SP3 的 Chrome 10.0.648.204 中以星号呈现？见http://jsfiddle.net/MxtHm/

但如果我将 CSS 更改为

ul {
    list-style-type: none
}

li:before {
    content: "* "
}

li:first-child {
    background: none
}

li:first-child:before {
    content: ""
}

<li>Four</li> 渲染时不带星号。见http://jsfiddle.net/SGRej/

Safari 5.0.4 和 Firefox 3.6.16 呈现两个示例相同。我已经阅读了 Meyer 的书和 CSS 规范来寻找解释，但没有任何运气，而且 CSS 验证器并没有抱怨 CSS。

非常奇怪的是，如果我在 Chrome 中检查元素，它表明 li:first-child:before 正在覆盖 li:before 规则。

JSFiddle 使用的是 XHTML 1.0 Strict DOCTYPE，但我也看到了 HTML5 DOCTYPE。

谢谢。

2011-04-28 编辑：这似乎已在 Chrome 11.0.696.57 中得到修复，以及其他类似的伪元素相关问题。

【问题讨论】：

Ubuntu 10.10 上的 Chromium 12.0.712.0 (79102) 没有显示这种错误行为，因此可能已经提交了对这个错误的修复，所以我想它很快就会出现在稳定版本中。
Chrome 10.0.648.204、IE9 和 FF4 在 Windows 7 上的渲染对我来说都是一样的，第一个 LI 上没有“*”。
我使用的是 Chrome 10.0.648.204，但看不到问题。也许是 Win XP 错误？我可以告诉你，你的 CSS 和 HTML 没有问题，是 Chrome。

【解决方案1】：

我有理由确定您遇到的问题与我回答的上一个问题相同：

我发现了显而易见的事实，因为它是一个错误，并找到了一些确认它的错误报告。

其他人发现了一个奇怪的解决方法；查看接受的答案。

【讨论】：