Question

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

      <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>

所以我添加了类.school-options，并将其放在第二个样式表上，然后将background-color设置为红色。

.school-options {
    background-color:red;
}

为什么这不起作用？解决方案是什么？

Answer 1

无需使用!important，只需更改css库的状态顺序即可解决此问题，请调用stylesheet css下方的bootstrap

// 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">

查看演示

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.school-options {
	background-color: red;
}
</style>
</head>
<body>
<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>

Answer 2

有时你必须把它变得重要

button.school-options {

background-color:red !important;

}

Answer 3

（！important）类用于覆盖现有样式 层次结构CSS 也用于指定特定的CSS样式。

btn.school-options {

background-color:red !important;
}

Answer 4

以下是小提琴中的一些更新代码，我在自定义css文件中使用了!important和自定义类。

但是在加载bootstrap 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

.school-options {
  background-color: red !important;
}

FIDDLE

在bootstrap中覆盖primary-btn颜色

4 个答案: