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