Html 伪类'；n-child（）'；不使用'；：悬停“；

我试图将伪类

：nth-child（）

与

：hover

一起使用，但它似乎对我不起作用。我试图将一个元素的颜色悬停在上方时更改为绿色，但它会突出显示所有元素。我也试过不用悬停，所有颜色都没有变化

ul{
背景色：白色；
文字装饰：无；
填充：0；
保证金：0自动；
}
ulli{
边缘：0.2米；
显示：内联块；
填充：0；
列表样式：无；
}
ullia{
文字装饰：无；
颜色：黑色；
}
第n个孩子（2）{
颜色：绿色；
}

这是因为

a

不是第二个孩子-它是其父

li

的独生子。您要查找的是第二个

li

元素的

a

子元素。你可以这样得到：

li:nth-child(2) a{ color: green; }

然后，对于悬停，这两个选项中的任何一个都与问题中的代码一起工作。这取决于您希望悬停的目标：

// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }

/* OR */ 

/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }

这是因为

a

不是第二个孩子-它是其父

li

的独生子。您要查找的是第二个

li

元素的

a

子元素。你可以这样得到：

li:nth-child(2) a{ color: green; }

然后，对于悬停，这两个选项中的任何一个都与问题中的代码一起工作。这取决于您希望悬停的目标：

// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }

/* OR */ 

/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }

我希望此代码可以帮助您。并使用此链接了解有关伪类和元素的更多信息

---

我希望这段代码可以帮助你。并使用此链接了解有关伪类和元素的更多信息

---

您的所有链接都是第一个子链接。你需要使用'li'上的第n个孩子。你所有的链接都是第一个孩子。你需要在'li'上使用第n个child，我想知道这行代码

li:n个child（2）：将鼠标悬停在{color:green；}

上为什么必须有一个选择器才能工作？第n个孩子不是已经选择了吗？@Tony the

li。第n个孩子（2）

将选择第二个

li

，但是您要更改链接颜色，它是

li

中的

元素。因此，当第二个
li
悬停时，这一行将改变它包含的
a
的颜色。我想知道这一行代码
li:nth child（2）：悬停a{color:green；}
为什么必须有一个选择器才能工作？第n个孩子不是已经选择了吗？@Tony the
li。第n个孩子（2）
将选择第二个
li
，但是您要更改链接颜色，它是
li
中的
元素。因此，当第二个
li
悬停在上方时，此行将更改它包含的
a
的颜色。