在 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。

我知道 class 是正确的，但我似乎无法覆盖 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;
            }

        }
    }

不同的是我在选中的class中添加了一个嵌套的a{}。

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

Highlighting Current Page in Nav_Menu (WordPress) /w SASS

wordpress

sass

menuitem