CSS的奇怪行为：第一个孩子：之前在Chrome中

问题描述：

我在Chrome 10 w/:first-child:before中看到了一些相当奇怪的东西。CSS的奇怪行为：第一个孩子：之前在Chrome中

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

任何人都可以explai为什么<li>Four</li>与呈现在Chrome 10.0.648.204在Win XP SP3星号？见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使这两个示例都相同。我已经阅读了迈尔的书和CSS规范，没有任何运气找到解释，而CSS验证器并没有抱怨CSS。

极其奇怪的是，如果我在Chrome中检查元素，则表明li:first-child:before正在覆盖li:before规则。

JSFiddle使用XHTML 1.0严格的DOCTYPE，但我也看到这与HTML5 DOCTYPE。

谢谢。

2011-04-28编辑：这似乎已被修复在Chrome 11.0.696.57，以及其他类似的伪元素相关的问题。

Ubuntu 10.10上的Chromium 12.0.712.0（79102）没有显示这种错误的行为，所以修复这个错误可能已经被提交，所以我想它很快会在稳定版本中出现。 – 2011-04-04 13:47:56

Windows 7上的Chrome 10.0.648.204，IE9和FF4对我来说都相同，第一个LI上没有'*'。 – 2011-04-04 13:50:51

我使用Chrome 10.0.648.204，并且我看不到问题。也许一个Win XP的错误？我可以告诉你，你的CSS和HTML没有问题，它是Chrome。 – 2011-04-04 14:01:17

答

我有理由相信你要通过同样的问题咬伤在这个前面的问题我回答：

last-child:after not rendering in Chrome? Pseudo-element use issue?

我想通了明显的事实中，这是一个错误，并发现了一些确认它的错误报告。

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

谢谢。我没有看到这些引用，但我不认为我实际上是在搜索“最后一个孩子”。提到的解决方法并没有为我解决问题，但是我没有任何副作用。 – mpdonadio 2011-04-04 22:38:15

CSS的奇怪行为：第一个孩子：之前在Chrome中

相关推荐