如何使用CSS将默认的Bootstrap按钮颜色更改为自己选择的自定义颜色

Question

.nav-link {
font-family: "Montserrat";
font-weight: 300;
font-size: 1.2rem;
color: #ededed;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<li class="nav-item">
<a class="nav-link" href="#about">about</a>
</li>

css部分中的所有其他元素都在工作，除了color元素。当我在chrome开发工具中查看网页时，它显示css没有覆盖默认的引导按钮颜色(rgba(。

Answer 1

首先向元素添加一个新类，然后使用important重写引导程序样式

.nav-link {
font-family: "Montserrat";
font-weight: 300;
font-size: 1.2rem;
color: #ededed;
}
.new-class{
/* over write */
color:red !important;
font-size:30px !important;
/* etc */
}
.new-class:hover{
color:#000 !important;

}
.il-style
{
	list-style:none !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<li class="nav-item il-style">
<a class="nav-link new-class" href="#about">about</a>
</li>

• 或者，您可以在引导程序样式之后调用style.css，而不使用important，但有时您需要使用它