更改导航栏文本颜色

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 class 添加到您所需的标签即可更改颜色。

Bootstrap 通过类提供了一些不同的主题 colors。 Go 通过这里的文档

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

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