css - CSS :first-child:before in Chrome 的奇怪行为

Question

我在带有 :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 以及其他类似的伪元素相关问题中得到修复。

Answer 1

我有理由相信您遇到的问题与我在上一个问题中回答的问题相同:

last-child:after not rendering in Chrome? Pseudo-element use issue?

我发现显而易见的事实是一个错误，并找到了一些错误报告来证实这一点。

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