Question

因此，我的菜单位于顶部，我希望“联系我们”的链接为白色。我为它分配了一个自定义类，这是我到目前为止添加的内容：

.cta-button {
    border: 2px solid red;
    border-radius: 15px;
    padding: 5px;
    background-color: red;
    top: -6px;
    color: #ffffff !important;
    transition: all .3s 0s;
}

.cta-button a:link, a:visited, a:active {
    padding: 0px !important;
    color: #ffffff !important;
    
}

这里是直播： https://kkat.mavenpromedia.com/

如您所见，我添加了“重要”元素，但是链接仍然是黑色的，并且从标题模块本身的链接样式中提取出来，而不是为该链接添加的代码。

谢谢

Answer 1

尝试像这样添加颜色-

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
   color: #fff !important;
}

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:active,
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:visited{
   color: #fff !important;
}

正如我在网站上看到的那样，给定的链接颜色已经写了！important。现在，当我们为同一元素提到两个！css重要属性时，我们必须检查其特异性。您可以在此处了解CSS的特异性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

另一注：过多使用！important来覆盖CSS属性是一个坏习惯。

Answer 2

这里有2个问题：

链接的颜色不是在<li>级别（添加类的位置）设置的，而是在<a>级别设置的。您需要在选择器color下设置属性.cta-button > a
已经使用!important设置了默认颜色（不好的做法），因此不仅您还必须使用!important，而且还需要匹配specificity的级别。最好的方法是复制/粘贴模板中使用的选择器，然后添加您的自定义类，

.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
    color: white !important;
}

当然，您需要对:active，:visited等做同样的事情……

如何覆盖WordPress标头中的链接颜色？

2 个答案: