Html 在引导中覆盖主btn颜色

对于我网页上的特定按钮，我想更改颜色。我有自己的第二个样式表，列在标题的第二位

      <button class=" btn btn-primary dropdown-toggle school-options" type="button" data-toggle="dropdown">Choose a School
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="#">Add your school</a></li>
      </ul>

---

为什么这样不行？什么是解决方案？

有时候你必须让它变得重要

按钮。学校选项{

background-color:red !important;

}（！重要）类用于覆盖现有样式。
层次CSS也用于指定特定的CSS样式

btn.school-options { background-color:red !important; } 学校选择{ 背景色：红色！重要；

---

} 这里有一些更新的代码，我在这里使用了

！重要信息

使用自定义css文件中的自定义类

---

但是，在加载引导css后加载自定义css文件。否则，您将无法获得期望的结果

HTML

<button class=" btn btn-primary dropdown-toggle school-options" type="button" data-toggle="dropdown">Choose a School
  <span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#">Add your school</a></li>
</ul>

---

无需使用

！重要信息

，您可以通过更改css库的状态顺序来解决此问题，调用

引导程序下的
样式表

// call bootstrap first

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

// then call the custom style , this will override the bootstrap css

<link rel="stylesheet" href="css/custom.css">

//首先调用引导
//然后调用自定义样式，这将覆盖引导css

查看演示



.学校选择{
背景色：红色；
}
择校


从
btn-btn-primary
类中，引导库可能具有更高的优先级（即特殊性）。我不喜欢使用像Bootstrap这样的预制CSS库的原因之一是，要添加覆盖库中样式的自定义样式，通常需要使用
！重要的
CSS标志——这是一种可怕的做法，通常会导致CSS地狱般的尝试，每次都使用
来获取更具体的选择器！重要信息
例外情况/规则。但要回答您的问题，您可以执行
.school options{background color:red！important；}
在加载引导css后加载自定义css文件。否则，您将无法获得期望的结果。
.school-options {
  background-color: red !important;
}

// call bootstrap first

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

// then call the custom style , this will override the bootstrap css

<link rel="stylesheet" href="css/custom.css">