想要覆盖 Bootstrap，但如何避免使用 !important? [英] Want to override Bootstrap, but how to avoid the use of !important?

问题描述

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

I am using Bootstrap and want to override some css: I am removing the background, border and the not-allowed-pointer in form fields when in disabled state.

这是我的 css 的样子:

This is how my css looks:

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

但我知道使用 !important 是一件坏事.但是我应该如何更改代码以避免使用 !important?我试图用input.no-extras"和类似的东西使它更具体，但到目前为止还没有任何运气......

But I know it is a bad thing to use !important. But how should I change the code to avoid using !important? I have tried to make it more specific, with "input.no-extras" and similar, but have not had any luck so far...

在此处查看示例代码http://plnkr.co/edit/1AuszJ?p=preview

See example code here http://plnkr.co/edit/1AuszJ?p=preview

推荐答案

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

You can override CSS simply by being more specific with your selectors. Anything that selects the same tag in a more specific way is enough to override an existing definition. So, for example, putting a form reference before the target class is enough:

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

Plunker 演示

这篇关于想要覆盖 Bootstrap，但如何避免使用 !important?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！