更改導航欄文本顏色

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
}