突出显示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;
            }

        }
    }

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