如何更改菜单项的背景颜色？

Question

我在Codepen中尝试过此操作

HTML：

 <li id="menu-item-2952" class="fa fa-search menu-item  
 menu-item-type-post_type menu-item-object-page menu- 
item-2952"><a title="Search Adsler" 
href="https://adsler.co.uk/search-adsler/">Search 
Adsler</a></li>
</ul>
</li>
</ul></div>                         
</div>

Css：

.menu-item-2952 {background-color: red;} 

完美运行。

在我的网站上尝试过，什么都没有

也尝试不使用important-。

也尝试过

#menu-item-2952 {background-color: red;} 

这会将颜色更改为绿色（现在是红色）和红色。

尝试：

#menu-item-2952 {background-color:  red! Important;} 

这根本不是什么。

我想要的是将背景颜色从绿色更改为白色。

Answer 1

将CSS更改为：

#menu-item-2952 {background-color: red;} 

 <li id="menu-item-2952" class="fa fa-search menu-item  
 menu-item-type-post_type menu-item-object-page menu- 
item-2952"><a title="Search Adsler" 
href="https://adsler.co.uk/search-adsler/">Search 
Adsler</a></li>
</ul>
</li>
</ul></div>                         
</div>

编辑：

我没有意识到您在html中只是有一个空格，哈哈： 您已将菜单项2952更改为菜单项2952。或者像我说的那样使用ID。

.menu-item-2952 {background-color: red;} 

 <li id="menu-item-2952" class="fa fa-search menu-item  
 menu-item-type-post_type menu-item-object-page menu-item-2952"><a title="Search Adsler" 
href="https://adsler.co.uk/search-adsler/">Search 
Adsler</a></li>
</ul>
</li>
</ul></div>                         
</div>

Answer 2

检查您的网站，似乎您具有以下规则：

.menu-item-2952 {
    background-color: white !important;
}

这将覆盖由于!important关键字而要指定的任何背景颜色；如果可能的话，您应该从CSS中删除此规则，或者将自己的类设置为：

.menu-item-2952 {
    background-color: red !important;
 }

编辑：我现在注意到，由于您提到要使背景为白色而不是绿色，因此看来您定位的是错误的元素；具有绿色背景的元素实际上是锚标记，请尝试使用CSS定位该选择器，并具有以下内容：

a[href="https://adsler.co.uk/search-adsler/"]{
   background-color: white;
}