无法使用自定义CSS覆盖主题的默认样式表

Question

我试图在我的WordPress主题设置中覆盖我的默认CSS，但是我有一个heckuva时间这样做。

以下是我的顶级菜单：

当鼠标悬停在顶部链接上时，子菜单链接也是如此：

我希望这些链接是白色的......显然蓝色根本不会显示出来。

这是我在Firebug“关于”链接时得到的结果：

当我右键单击Firebug并复制HTML时，以下是它的部分内容：

<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155"><a href="http://www.occupyhln.org/about-us/">Our Mission</a></li>

我尝试过使用#MashMenu，.menu-mega-menu，.mashmenu，并且总是做一个颜色：#FFFFFF！important;但没有什么能摆脱那种蓝色。我不知道我是否在这里提供了足够的信息，但是在指导我正确方向方面的任何帮助都会非常感激！

我的博客位于http://www.occupyhln.org

Answer 1

我不确定颜色是来自wordpress主题还是来自用户代理样式表，但后者确实倾向于使用更高的a特异性选择器来阻止简单a选择器以你想要的方式工作。

继承的值与选择器无关。您需要实际选择a来覆盖其属性的其他选择器。例如：

.wordpress-theme a {
    /* Selects <a> and sets the color
    color: blue;
}
#MashMenu {
    /* Selector has higher specificity but does not select <a> */
    color: red;
}
#MashMenu a {
    /* Selects `<a>` with higher specificity */
    color: red;
}

Answer 2

我认为您需要将颜色覆盖直接应用到您尝试生效的<a>标记。你可能有一些更高级别的东西来决定颜色。

Consider this simple example:

<强> HTML

<ul>
  <li>
    <a href='http://google.com'>Here is a link</a>
  </li>
</ul>

<强> CSS

li {
  color: red;
}

li a {
  color: green;
}

Answer 3

原始css更具体，并且具有！important值。所以用火扑灭并做一些像

这样的事情

.catalyst-widget-area a, .catalyst-widget-area a:visited, 
.catalyst-widget-area a:hover {
  color: #fff !important;
}

您可以进一步缩小选择器，以确保它覆盖它。

#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited, 
#mashmenu .catalyst-widget-area a:hover {
  color: #fff !important;
}

你可以继续下去，让它更具体，直到它产生。

但这里有一些我一直想知道的事情，你如何将所有这些自定义css文件添加到 Wordpress主题？我这样说，因为这是一种正确的方式，而且有许多错误的方法。

正确的方法是你当前主题的making a child theme并从那里开始工作。但是，子主题不适用于入门级修改（虽然更容易从子主题覆盖默认样式），在这种情况下，有一些插件可以帮助您使用自己的自定义CSS覆盖css，这是最流行的是Jetpack。

Answer 4

为了解决这个问题以防任何人遇到类似的问题，我使用了以下内容：

.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}

但是当把它放在我的自定义CSS的底部时，它不起作用;当我把它放在我的自定义CSS的开头时，它起作用了一些原因。我不知道为什么会这样，但这就是我最终的伎俩。感谢所有认为并帮助我解决问题的人。