更改引导程序按钮的颜色

Question

这是一个愚蠢的问题，因为我觉得我应该知道答案并认为我的代码可以完成这项工作。

但是我正在使用引导程序并且我试图将 btn btn-primary 类从默认的蓝色更改为其他内容。

这是我的 html：

<input type="text" class="form-control" placeholder="Search by user name, member type, genre...">
                         <span class="input-group-btn">
                             <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                         </span>

还有我的 CSS：

.btn btn-primary:hover,
.btn btn-primary:focus,
.btn btn-primary:active,
.btn btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}

但它仍然是这样的：

Answer 1

由于btn与名为 的相同元素共享其类btn-primary，因此您的 CSS 选择器应该如下所示

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}