如何覆盖 WordPress 标题中的链接颜色？答案

【问题标题】：How to override the link color in WordPress header?如何覆盖 WordPress 标题中的链接颜色？
【发布时间】：2021-01-23 20:15:06
【问题描述】：

所以我的菜单在顶部，我希望“联系我们”的链接是白色的。我已经为它分配了一个自定义类，这是我目前添加的：

.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/

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

谢谢

【问题讨论】：

你在哪里/如何添加这个额外的 CSS？
在 Wordpress 的“主题选项”自定义 CSS 页面中。（使用 DIVI 主题）
最好的办法是使用浏览器开发工具仔细查看按钮的类，例如，有几个类，您需要将它们添加到 cat-button 类中。跨度>
您需要使您的 CSS more specific 超过现有的 CSS 规则，但是如果在问题中没有看到它们，我们将无能为力。（请注意，这里的问题必须是独立的，而不是依赖于会随着时间而中断或更改的外部链接 - 因此所有相关代码都必须直接包含在问题中）。
你想要这样吗？ nimb.ws/cj14bR 但是为什么白色的时候它会变得不可见。

标签： html css wordpress hyperlink

【解决方案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 为其编写。现在，当我们为同一个元素提到两个 !important css 属性时，我们必须检查特异性。你可以在这里了解 CSS 的特殊性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

另一个注意事项：使用过多的 !important 来覆盖 CSS 属性是一种不好的做法。

【讨论】：

您好！感谢您抽出宝贵时间回复。当我添加这样的颜色时，它会将所有链接更改为白色，而不仅仅是我给过的课程的“联系链接”。
我已经更新了代码，将确切的类名和特异性作为目标。请立即检查。
很高兴知道这一点。如果它帮助您解决问题，请支持我的答案并将其标记为已接受的答案。谢谢！

【解决方案2】：

这里有两个问题：

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

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

当然，:active、:visited、...

【讨论】：

谢谢你，你和AKNair帮了我很多忙！它现在正在工作。我了解已设置的 !important 是不好的做法，但由于它是通过 wordpress 主题模块自动设置的，我不确定删除它的最佳方法。看起来大多数东西已经添加了 !important 。我不知道，它令人困惑，但非常感谢！