Bootstrap 4 覆盖规则

Question

我正在尝试更改 bootstrap 4 中的导航栏 link 颜色

.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

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

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

Answer 3

给出 link 的完整路径，例如..

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