时间戳

首页 > 解决方案 > 更改导航栏文本颜色

html - 更改导航栏文本颜色

问题描述

我正在使用 Bootstrap 导航栏，我想更改其中一个链接的颜色。我可以使用下面的代码轻松更改所有链接的颜色，但我只需要更改一个。

.navbar-custom .navbar-nav .nav-link {
color: red;
}

和 HTML

<nav class="navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light">
    <div class="container-fluid">
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a>
          </li>
       </ul>
    </div>
  </nav>

假设我想将登录链接的颜色更改为红色。如何在不同时更改关于链接颜色的情况下执行此操作以及更改一个元素的样式而不是嵌套元素（如导航栏中的列表）中的所有样式的规则是什么？

标签： htmlcsstwitter-bootstrapcolors

解决方案

一种选择是使用属性选择器：

a[href="/login"] {
  color: red;
}
<nav class="navbar navbar-expand-md navbar-custom fixed-top navbar-light bg-light">
    <div class="container-fluid">
        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a>
          </li>
       </ul>
    </div>
  </nav>

推荐阅读