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

【问题标题】：Rollover list with the first child already activated?第一个孩子的翻转列表已经激活？
【发布时间】：2012-09-21 04:49:30
【问题描述】：

对不起我的英语不好，我是法国人！

第一个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 时，他变成黑色而不是保持红色。

感谢您的提前。

【问题讨论】：

【解决方案1】：

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

通过将最后一条规则写成

来做到这一点

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

【讨论】：

【解决方案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; }

【讨论】：