Question

谁能告诉我为什么“回转支承”的颜色不是红色，而背景颜色的确是黄色？我敢肯定我在做一件令人难以置信的愚蠢的事情……但这超出了我的范围。 Screenshot showing elementor editor with menu bar

/* Decorate Slewing Rings in Menu */ .slewing-rings { 
    background-color: 
    yellow; color: red; 
    }

一如既往，谢谢。米歇尔

Answer 1

也许您的文本颜色是从父元素继承的。

尝试

$ git log -- <file>

Answer 2

您需要设置包含“ Slewing Rings”文本的子元素的样式，而不是周围的标签框的样式（这是您的.slewing-rings类当前所应用的样式。）我不知道您的确切节点-该图片中的树，但是如果右键单击并检查该按钮上的元素，请尝试设置包含文本的元素的样式。

<div class="slewing-rings">
  <span>Your Text Is Probably Here</span>
</div>

现在您已经提供了页面链接，我可以提供更简洁的帮助：

<li class="slewing-rings menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-171">
  <a href="https://michellepace.com/02/slewing-rings/" class="elementor-item has-submenu" id="sm-15723547752042446-1" aria-haspopup="true" aria-controls="sm-15723547752042446-2" aria-expanded="false">Slewing Rings<span class="sub-arrow"><i class="fa"></i></span></a>
</li>

“ a”标签需要在CSS中定位。但是，您的网站似乎正在按预期运行，因此您可能已经了解了。看来elementor-item类正在提供红色。

Answer 3

您可以通过两种方式进行操作： 1.您可以将！important这样的css属性赋予

/* Decorate Slewing Rings in Menu */ 
   .slewing-rings { 
     background-color: yellow; 
     color: red !important; 
    }

您可以为父类提供“ .slewing-rings”类，以更改其优先级。

/* Decorate Slewing Rings in Menu */ 
   .parentClass .slewing-rings { 
     background-color: yellow; 
     color: red !important; 
    }

Answer 4

该类被添加到li项中，这就是为什么CSS无法正常工作的原因。

尝试

.slewing-rings a {
   color: red;
}

为什么菜单项的颜色不变，而背景却不变？

4 个答案: