0

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

这是我的 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{}。

有什么建议吗？

4

2 回答 2

0

我认为您的问题是您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;
   }
}

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

于 2019-10-16T05:47:10.870 回答
0

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{}。

于 2019-10-16T06:06:25.990 回答