如何覆蓋 WordPress header 中的鏈接顏色？

Question

所以我的菜單在頂部，我希望“聯系我們”的鏈接是白色的。 我已經為它分配了自定義 class，這是我到目前為止添加的內容：

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

如您所見，我添加了“重要”，但鏈接仍然是黑色的，並且是從 header 模塊本身的鏈接 styles 中提取的，而不是我為該鏈接添加的代碼。

謝謝

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;
}

正如我在網站上看到的那樣，給定的鏈接顏色已經為它編寫了重要的內容，現在當我們有兩個重要的 css 屬性提到相同的元素時：那么我們必須檢查特異性。 您可以在 CSS 中了解特異性： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

另一個注意事項：使用 too many.important 覆蓋 CSS 屬性是一種不好的做法。

Answer 2

這里有兩個問題：

1. 鏈接的顏色不是在<li>級別（您添加類的位置）設置的，而是在<a>級別設置的。 您需要在選擇器.cta-button > a下設置屬性color

2. 默認顏色已經使用!important設置（不好的做法），因此您不僅必須使用!important ，而且還需要匹配specification級別。 最好的方法是復制/粘貼模板中使用的選擇器並添加您的自定義 class，如下所示

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

當然你需要對:active , :visited ,...做同樣的事情