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

Question

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

有了这个 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: ""
}

任何人都可以解释为什么

Four

在 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: ""
}

;四个

渲染不带星号。请参阅 http://jsfiddle.net/SGRej/

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

极其奇怪的是，如果我在 Chrome 中检查 Element，它会显示 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: 未在 Chrome 中渲染后？伪元素使用问题？

我发现了明显的事实，这是一个错误，并且发现了一些错误报告证实了这一点。

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