使用CSS的奇怪行为:第一个孩子:在Chrome之前

Question

我在Chrome 10中看到了一些奇怪的东西: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中修复,以及其他类似的伪元素相关问题.

Answer 1

我有理由相信你被同一个问题所困扰,就像上一个问题我回答的那样:

last-child:在Chrome中渲染后？伪元素使用问题？

我发现了一个明显的事实,即它是一个错误,并发现一些错误报告确认了它.

别人找到了一个奇怪的解决方法; 看到接受的答案.