突出显示Nav_Menu中的当前页面(WordPress)/w SASS

Question

我正在尝试更改导航菜单文本的颜色。

这是我的CSS代码：

li {
a {
color: $color4;
text-decoration: none;
display: block;
padding: 0.25rem 5rem 0rem 0rem;
font-size: 1.2rem;
font-weight: bold;
&:hover {
color: $color5;
}
}
&.current-menu-item {
color: $color5 !important;
background:blue;
}
}

我正在使用 SASS 而不仅仅是 CSS。

问题是.current-menu-item获得蓝色的背景，但文本颜色似乎没有改变，即使臭名昭著！important也是如此。

我知道该类是正确的，但我似乎无法覆盖 a{}。

有什么建议吗？

Answer 1

我认为您的问题是您在两个不同的元素上定义color属性，第一次在a上，第二次在li上。

您可以尝试直接在li上定义颜色，并使a继承它：

li {
color: $color4;
&:hover {
color: $color5;
}
&.current-menu-item {
color: $color5;
background:blue;
}
a {
color: inherit;
text-decoration: none;
display: block;
padding: 0.25rem 5rem 0rem 0rem;
font-size: 1.2rem;
font-weight: bold;
}
}

如果这不起作用，也许其他样式定义正在覆盖您的样式定义。在这种情况下，您应该使用浏览器检查器检查您的页面，以查看是否在其他地方为这些元素定义了任何其他样式。

Answer 2

giuseppedoponte是正确的。

但是我通过这样做为我做了一个不同的工作：

li {
a {
color: $color4;
text-decoration: none;
display: block;
padding: 0.25rem 5rem 0rem 0rem;
font-size: 1.2rem;
font-weight: bold;
&:hover {
color: $color5;
}
}
&.current-menu-item {
a {
color: $color5;
}
}
}

不同之处在于我在所选类中添加了一个嵌套的 a{}。