更改导航栏文本颜色

Question

我正在使用 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>

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

Answer 1

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

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>

Answer 2

只需将text-danger 类添加到您所需的标签即可更改颜色。

Bootstrap 通过类提供了一些不同的主题颜色。浏览文档here

您需要login。因此将text-danger 添加到受人尊敬的<a href='/login'>Login</a> 标签中。

<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 text-danger" href="/login">Login</a>
          </li>
       </ul>
    </div>
  </nav>

使用:n-th-of-type()

如果您有与此处类似的标签并且只想更改选定的标签，那么您可以使用此方法。可以看到n-th-of-type()、nth-child()、nth-last-of-type()

li:nth-of-type(3) a{  // It will select third li a element
  color: red
}

li:nth-of-type(2n) a{  // It will select even li a element like 2nd, 4th, ..
  color: red
}

li:nth-of-type(2n+1) a{  // It will select odd li a element like 1st, 3rd, ..
  color: red
}