5

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

4

1 回答 1

9

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

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

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

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

于 2011-04-04T13:52:10.197 回答