Question

我正在构建一个网站，其中一半的导航栏链接为黑色，一半为白色。我有：

@navbar-default-link-color: #fcfcfc;

但是，我正在努力弄清楚如何覆盖导航栏另一半的链接颜色。我尝试过谷歌搜索的东西：

.navbar-default > .navbar-nav > .dark > a:link {
  color: #171b1e !important;
}

只是

.dark {
  @navbar-default-link-color: @brand-primary;
}

HTML示例：

<li class="dark">
  <a href="https://dribbble.com" target="_blank">
    <i class="fa fa-dribbble fa-2x"></i>
  </a>
</li>

我也尝试过id而不是课程。我尝试过的任何内容都不会覆盖链接颜色。我确实阅读了有关使用每个＃menu-item更改每个单独导航栏链接的内容，但我对如何实际获取＃menu-item值感到茫然。

Answer 1

在不查看浏览器检查器的情况下，很难知道是否正在应用正确的CSS，但这应该有效：

如果对<li>元素应用黑暗，则很可能需要将其直接应用于<a>元素，因为它已应用默认颜色。

.dark > a {
  color: @brand-primary;
}

如果不起作用，请尝试实施!important。这将迫使它使用正确的颜色：

.dark > a {
  color: @brand-primary !important;
}

您也可以简单地将颜色应用于<a>元素。在那种情况下：

a.dark {
  color: @brand-primary !important;
}

并将其应用于<a>

<li>
  <a class="dark">
    Link Text
  </a>
</li>

Answer 2

你可以使用导航栏的渐变..但它将是逐渐的颜色过渡。

编辑：只使用导航栏，而不是导航栏默认或反向样式..然后您可以手动编写css，如

  .navbar {
            background: #e0e0e0;

        .navitem {
               background: #ffffff;
  }
        .navitem2 {
               background: #ffffff;
  }
  }

如何只更改一些导航栏链接颜色？

2 个答案: