css - Bootstrap 4 覆盖规则

Question

我正在尝试像这样在引导程序 4 中更改导航栏链接颜色

.nav-link {
   color: red;
}

我的 scss 文件看起来像这样

@import '../../public_html/static/vendor/bootstrap/scss/bootstrap';

.nav-link {
   color: red;
}

但是没有!important这不起作用。

我错过了什么？

Answer 1

看起来第一条规则比您添加的规则更具体，因此具有优先权。

如果您将选择器更改为：

.navbar-light
.navbar-nav .nav-link {
  color: red;
}

然后它应该可以工作，因为它具有相同级别的特定性，但在源头中更进一步。

如果您不想更改选择器，您可以随时添加!important，例如

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

但是当它可以以更好的方式解决时，通常不是一个好主意，!important因为它可能会给你带来更多的问题。

Answer 2

给出该链接的完整路径，例如..

.navbar-nav .nav-item .nav-link {
   color: red;
}

Answer 3

查看此答案，您可以执行以下操作以完全覆盖：

.nav-link[class="nav-link"] {
    color: red;
}