第一個孩子已經激活的翻轉列表？

Question

對不起，我英語不好，我是法國人！

第一li已經在紅，但我想經典翻轉效果（僅適用於CSS）

<ul> 
    <li>1111</li> 
    <li>2222</li> 
    <li>3333</li> 
</ul> 

與

li:first-child { color: red; } 
li:hover { color: red; } 
ul:hover li:first-child { color: black; } 
li:first-child:hover { color: red; } 

最後一行不起作用：當我的鼠標懸停1111，他變得黑色而不是保持紅色。

看吧請：http://jsfiddle.net/cP5rQ/3/

謝謝你的前進。

Answer 1

您需要增加最後一條規則的specificity，使其至少等於第三條規則的特殊性;它會覆蓋第三條規則，並且該項目將會變爲紅色。

寫的最後一條規則是

ul:hover li:first-child:hover { color: red; }​ 

See it in action執行此操作。

Answer 2

這是訣竅。這是你想要的嗎？

li:first-child { color: red; } 
ul:hover li:first-child { color: black; } 
li:hover { color: red; } 
ul:hover li:first-child:hover { color: red; }​ 

http://jsfiddle.net/cP5rQ/6/