css 如何更改最后两个菜单的文本颜色

moiiocjp 于 2023-01-14 发布在其他

关注(0)|答案(7)|浏览(161)

我想知道如何改变最后两个菜单的颜色，我想要的是，而不是使用黑色的最后两个菜单，我想使用白色。
网址：https://hrcstaging.wpengine.com/

最后两个菜单设计得像一个按钮，我想把文本颜色改成白色。

7条答案

您可以向这些元素添加ID并向其添加CSS属性。

<a id="white-link" href="#">Verify Insurance</a>
<a id="white-link" href="#">Number</a>

a#white-link {
    color: white;
}

与css你可以使用

button{
  color: #fff;
}

或buttons类，在本例中为

.btnClass{
  color: #fff;
}

添加这个css到你的css文件.

.main-navigation .main-nav ul li:nth-last-child(2) a,.main-navigation .main-nav ul li:last-child a{
    color:#fff;
}

请在按钮中添加两个同名的类。

.white{
  color: #fff;
}

<button class='white'>Verify Insurance</button>
<button class='white'>(704)-970-4106</button>

提到button标签可以是任何具有自定义属性的html元素，例如a标签。
您也可以将#fff代码替换为颜色名称，因为#fff是白色十六进制代码。

li#menu-item-4779 a, li#menu-item-4780 a  {
    color: white;
    font-weight: bold;
}

谢谢伙计们，我得到了代码，它现在工作得很好

如果您想要一种比使用ID更动态的方法，并且您的菜单将保留相同数量的列表项，则可以使用伪类。:nth-child应该可以使用。:nth-of-type也可能可以使用，但我将使用:nth-child。

#menu-primary-menu li:nth-child(7) a, #menu-primary-menu li:nth-child(8) a { color: white }

或

#menu-primary-menu li:nth-of-type(7) a, #menu-primary-menu li:nth-of-type(8) a { color: white }

在您的例子中，如果ID永远不会改变，这是最简单的方法，但是了解伪类的一般知识是很好的。

好的，最后一项菜单：

.your_custom_menu ul li:last-child a{ /** your code here  */ }

对于最后一项之前的项：

.your_custom_menu ul li:last-child(2) a{ /** your code here  */ }