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，以及其他類似的僞元素相關的問題。

來源

2011-04-04 mpdonadio

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?

我想通了明顯的事實中，這是一個錯誤，並發現了一些確認它的錯誤報告。

其他人發現一個奇怪的解決方法;看到接受的答案。

來源

2011-04-04 13:52:10 thirtydot

謝謝。我沒有看到這些引用，但我不認爲我實際上是在搜索「最後一個孩子」。提到的解決方法並沒有爲我解決問題，但是我沒有任何副作用。 – mpdonadio 2011-04-04 22:38:15

CSS的奇怪行爲：第一個孩子：之前在Chrome中

回答

相關問題