Question

这是一个wordpress主题。我编辑css因为我想更改每个菜单li项的悬停颜色。这是我到现在为止尝试的代码

#menu-item-43 a:hover {background-color: rgb(161, 204, 58) !important;}

问题是同样的方法在其他项目中不起作用。为什么？
然后我尝试使用css3第n个元素来选择我想要的特定li项。下面的例子
```
 #topnav li:nth(4) a:hover {background-color:black;}
```

以上也行不通。有关如何更改每个菜单项颜色的任何想法？提前致谢

Answer 1

查看用于为<a>元素提供背景颜色的选择器：

#topnav li.current-menu-item > a, #topnav li.sfHover > a, #topnav li a:hover

您的选择器必须更加具体，而#menu-item-43 a:hover是不够的。为什么不尝试：

#menu-item-43 > a, #menu-item-43 > a:hover { ... }

Answer 2

它可能与您尝试更改颜色的链接的特殊性有关。如果您不熟悉css特异性，这里有一个很好的参考： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

基本上CSS基于它们的特异性应用于DOM中的元素，因此您尝试使用选择器和内联等来应用CSS的方式会影响哪些元素实际上将CSS应用于它们。

Answer 3

如果您使用的是可重复的项目，例如menu-item，则应使用类。当您使用#时，您正在按ID选择元素，该元素对于整个文档应该是唯一的。在某些情况下，选择器只会选择与ID匹配的第一个项目，因为应该是唯一的。

EG：

.menu-item a:hover { background-color: rgb(161, 204, 58) !important;} }