在导航链接上否决 Bootstrap 5 样式 [重复]

Posted 2023-03-06

【中文标题】在导航链接上否决 Bootstrap 5 样式 [重复]

【英文标题】：Overrule Bootstrap 5 styling on nav-link [duplicate]

【发布时间】：2021-07-02 03:06:50

【问题描述】：

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

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

我认为我应该能够解决我的 CSS 中的类，以否决 Bootstrap CSS 文件中关于同一类的任何样式。但是我设法做到这一点的唯一方法是使用!important（有人告诉我，这是懒惰的编码员的做法），通过为每个链接添加一个ID（这非常麻烦） ，或者通过更改类名（这是我当前的解决方案，另请参阅我的 CodePen here 中的完整导航栏代码，但是使用 Bootstrap 有什么意义呢？）。

我查看了 Bootstrap 5 CSS，据我所知，nav-link 元素只作为类来处理，这应该很容易被否决，对吧？

我认为它会如何工作：

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

我在这里错过了什么？

【参考方案1】：

CSS 的关键在于你的具体程度（也就是具体性）。

您可以通过多种方式来实现您想要做的事情：

在 Bootstrap 样式表之后加载您的自定义样式表， 为您尝试更改的类创建相同/更具体的引用。

第一点就像在 html、php 等中将自定义样式表放在 Bootstrap 之后一样简单（取决于您在样式表中加载的方式）。

第二项可以通过以下方式实现：

.nav-link a 
    color: red;

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

#targetID .nav-link a 
    color: red;

注意：您应该尽量减少难以覆盖的 CSS 属性的特殊性，因为过于特殊和添加大量类会迅速增加样式表的大小。这会对页面速度等产生连锁反应。

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

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

【讨论】：

谢谢！我确实没有考虑过样式表的顺序以及它如何影响首先出现的 CSS 样式。此外，出于某种原因，我最初认为它会起作用的方式现在确实起作用了。我不知道为什么上次我检查它没有。我不认为我改变了什么。但无论哪种方式，这都是很好的信息！

没问题，很高兴它现在可以工作了。

【参考方案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;

【讨论】：

哦，是的，对不起。红色仅用于演示目的。白色是我在导航栏中真正想要的颜色。

【参考方案3】：

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

【讨论】：

同意。尽管我确实认为使用他们的代码并尝试更改每个组件，或者弄清楚他们如何做某件事是非常有教育意义的。但是，是的，一旦你对自己的编码足够擅长，你可能应该只在需要快速完成某些事情而不是太原始时才使用它们。