如何添加:使用CSS2选择器将鼠标悬停在元素的第n个子元素上？

Question

我试图在悬停时给每个菜单li一个独特的背景颜色,我想用css2来做.

<ul>
    <li>
    <li>
    <li>
    <li>
</ul>

我能够使用以下内容在第一个元素上添加背景:

nav ul > li:hover:first-child a { background-color:red !important; }

当我在2ndelement上添加不同的背景时,只有当我将光标放在第一个元素上时,才会出现下一个元素的悬停效果.

到目前为止这是我的代码:

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:hover:first-child + li a { background-color:blue !important; }

有没有一种适当的方法来使用CSS2？

我试图通过以下链接深入了解这个Boltclock的答案.

如何使用CSS2选择器获取元素的第n个子元素？

任何帮助将不胜感激.

Answer 1

第n个子元素由+链中的最后一个元素表示(紧跟在它之后的组合子之前,如果有的话),所以你将:hover选择器附加到该元素,如下所示:

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

如果你想让第一个孩子更清楚,你可以重新排序伪类,放在:hover最后(即之后:first-child):

nav ul > li:first-child:hover a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

最后,正如其他人所提到的,!important除非您有特定的理由使用它们,否则应删除它们.