Bootstrap 4覆盖规则

Question

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

.nav-link {
   color: red;
}

我的scss文件看起来像那样

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

.nav-link {
   color: red;
}

但如果没有！important ，这不起作用。

我错过了什么？

Answer 1

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

如果您将选择器更改为：

!important

然后它应该工作，因为它具有相同的特定级别，但在源中进一步下降。

如果您不想更改选择器，可以随时添加.nav-link { color: red !important; } ，例如

!important

但是当它能够以更好的方式解决时，投入 WHERE CONVERT(SMALLDATETIME,CONVERT(VARCHAR(10),A.ApptStartDateTime,103),103) = CONVERT(SMALLDATETIME,CONVERT(VARCHAR(10),@AppDate,103),103) 通常不是一个好主意，因为它可能会导致你的问题进一步发展。

Answer 2

提供该链接的完整路径，如..

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

Answer 3

查看this答案，您可以执行以下操作以获得完整覆盖：

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