1

我正在尝试在我的 WordPress 主题设置中覆盖我的默认 CSS，但是这样做的时间很长。

这是我的顶级菜单的样子：

菜单

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

子菜单

我希望链接是白色的......显然蓝色根本没有显示出来。

这是我在“关于”链接中使用 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

4

4 回答 4

1

原始的 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 主题中中？我这么说是因为有正确的方法，也有很多错误的方法。

正确的方法是为您当前的主题制作一个子主题并从那里开始工作。但是，子主题不适用于入门级修改（尽管从子主题覆盖默认样式更容易），在这种情况下，有一些插件可以帮助您使用自己的自定义 css 覆盖 css，这是最受欢迎的是喷气背包。

于 2013-09-04T21:22:44.703 回答
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;
}
于 2013-09-04T17:22:32.863 回答
1

我相信您需要将颜色覆盖直接<a>应用到您试图影响的标签。你可能有一些更高级的东西来决定颜色。

考虑这个简单的例子：

HTML

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

CSS

li {
  color: red;
}

li a {
  color: green;
}
于 2013-09-04T17:23:08.560 回答
0

为了在有人遇到类似问题的情况下解决此问题，我使用了以下内容：

.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 的开头时，它出于某种原因起作用。我不知道为什么会这样，但这就是我最终成功的原因。感谢所有提出意见并帮助我解决这个问题的人。

于 2013-09-06T03:46:59.977 回答