否决 Bootstrap 5 导航样式-link

Question

*编辑：这个问题已经得到了充分的回答，而我在下面描述的问题显然一开始就不存在，所以无论如何都没有实际意义。抱歉，谢谢肖恩·瓦纳姆！

我正在学习为网站编写代码。我正在尝试基于 Bootstrap 5 中的标准导航栏制作一个导航栏。它由几个 nav-item 元素组成，其中包含 nav-link 元素。我想让 nav-link 元素看起来像我想要的那样。

我认为我应该能够解决 CSS 中的 class 以否决 Bootstrap [=72] 中与 class 相同的任何样式=] 文件。但我设法做到这一点的唯一方法是使用 !important（有人告诉我，这是懒惰编码器的做法），为每个 link 添加一个 ID （这非常麻烦），或者通过更改 class 名称（这是我当前的解决方案，另请参阅我的 CodePen here 中的完整导航栏代码，但是使用 [=75= 的意义何在？ ]?).

我查看了 Bootstrap 5 CSS，据我所知，nav-link 元素仅被称为 classes，应该很容易推翻吧？

我认为它会如何工作：

.nav-link {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" aria-current="page" href="#">HOME</a>
</li>

生成红色字母。

但这并没有发生（*编辑：等等，它现在确实有效。我不知道为什么以前没有。）三种解决方案确实有效，但都是变通办法：

1.

.nav-link {
  color: red !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" aria-current="page" href="#">HOME</a>
</li>

2.

#navhome {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" id="navhome" aria-current="page" href="#">HOME</a>
</li>

3.

.nav-link2 {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link2" aria-current="page" href="#">HOME</a>
</li>

我在这里错过了什么？

Answer 1

CSS 的关键在于你有多专一（a.k.a 专一）。

您可以通过多种方式来实现您的目标：

在 Bootstrap 样式表之后加载自定义样式表，
创建 identical/more 对您要更改的 class 的特定引用。

第一步就像将自定义样式表放在 HTML、PHP 等中的 Bootstrap 之后一样简单（取决于您在样式表中加载的方式） .

第二项将通过执行以下操作来实现：

.nav-link a {
    color: red;
}

这样，您就可以专门针对 .nav-link classes 中的锚点。如果这不起作用，您可能需要通过添加父节点的 ID 属性或父节点 class 来更加具体，例如：

#targetID .nav-link a {
    color: red;
}

注意：您应该尝试降低难以覆盖的 CSS 属性的特异性，因为过于具体并添加了很多 class es 可以快速膨胀样式表的大小。这会对页面速度等产生连锁反应

您可以在此处找到有关特异性的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

这是为了更改您的 .css 文件

颜色：白色；更改为颜色：红色；

.nav-link2 {
font-family: 'roboto';
font-size: 14px;
font-weight: 300;
color: white;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 28px;
padding-bottom: 29px;}

Answer 3

使用 bootstrap 组件来制作自定义组件只会让一切变得更加困难我在尝试使用 bootstrap 分页组件进行自定义分页之前遇到过这个问题然后我意识到使用 html 和 css 更容易和更清洁。如果你真的想要那种特定的风格或者只是想快速构建一些东西，请使用 bootstrap 组件

否决 Bootstrap 5 导航样式-link

Overrule Bootstrap 5 styling on nav-link

html

css

styling

bootstrap-5