想要覆盖Bootstrap,但如何避免使用!important？

Question

我正在使用Bootstrap并想要覆盖一些css:我在禁用状态下删除表单字段中的背景,边框和不允许指针.

这就是我的css的样子:

.no-extras {
  border: 0 !important;
  box-shadow: none !important;
  background-color: white !important;
  cursor: default !important;
}

但我知道使用它是一件坏事!重要的是.但是我应该如何更改代码以避免使用!important？我试图通过"input.no-extras"和类似的方式使其更具体,但到目前为止还没有任何运气...

请参阅此处的示例代码http://plnkr.co/edit/1AuszJ?p=preview

Answer 1

您.no-extras只需添加.form-group即可使用:

.form-group .no-extras {
    border: 0;
    box-shadow: none;
    background-color: red;
    cursor: default;
}

Plunker

或者您可以使用任何其他父类.

Answer 2

您可以通过更具体地使用选择器来覆盖 CSS。任何以更具体的方式选择相同标签的操作都足以覆盖现有定义。因此，例如，form在目标类之前放置一个引用就足够了：

form .form-control[disabled] {
  cursor: default;
}  

笨蛋演示