html - 更改每个 li 项目悬停颜色的问题

Question

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

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

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

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

score 1 · Accepted Answer

查看您用于为<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 { ... }

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

例如：

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

3 回答 3