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

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

您需要将最后一条规则的特异性提高到足以使其至少等于第三条规则的特异性；然后它将覆盖第三条规则，并且该项目将变为应有的红色。

通过将最后一条规则编写为

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

看到它在行动。

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/