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

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

谁能解释为什么<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 中修复，以及其他类似的伪元素相关问题。

score 9 · Accepted Answer

我有理由确定您会被与我回答的上一个问题相同的问题所困扰：

我发现了一个明显的事实，那就是它是一个错误，并找到了一些确认它的错误报告。

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

1 回答 1