已激活第一个孩子的翻转列表？

Sorry for my poor english, I'm french !

抱歉我的英语不好，我是法国人！

The first li is already in red, but I want classical rollover effect (only css)

第一个li已经是红色，但我想要经典的翻转效果（只有css）

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

with

同

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

The last line doesn't work : When my mouse is over 1111, he becomes black instead of stay red.

最后一行不起作用：当我的鼠标超过1111时，他变成黑色而不是保持红色。

Look here please : http://jsfiddle.net/cP5rQ/3/

请看这里：http：//jsfiddle.net/cP5rQ/3/

And thank you for advance.

谢谢你的进步。

2 个解决方案

#1

You need to increase the specificity of your last rule enough so that it becomes at least equal to the specificity of the third rule; it will then override the third rule and the item will become red as it should.

你需要充分提高上一个规则的特异性，使其至少等于第三个规则的特异性;它将覆盖第三个规则，项目将变为红色。

Do this by writing the last rule as

通过将最后一条规则写为

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

See it in action.

看到它在行动。

#2

This does the trick. Is this what you wanted?

这样就可以了。这是你想要的吗？

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/

#1