問題改變每個李項懸停顏色

Question

這是參考鏈接：http://www.mytwins.gr/site/

這是一個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;} 
  

上面也不工作的例子。有關如何更改每個菜單項顏色的任何想法？在此先感謝

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元素，所以你嘗試應用使用選擇VS在線等CSS的方式..有影響哪些元素實際上會將CSS應用於它們。

Answer 3

如果您使用的是可重複的項目，像menu-item，你應該使用類。當您使用#時，您將通過id選擇元素，該元素對整個文檔應該是唯一的。在某些情況下，選擇器只會選擇與該ID匹配的第一個項目，因爲應該是唯一的。

EG：

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