输入文本CSS覆盖没有！important

Question

如何在不使用input[type=text]的情况下覆盖!important选择器上的CSS？

input[type=text]{
    background-color: rgb(255, 255, 255);
}

/*This doesn't work */
.bb-input{
    background-color: yellow;
}

Answer 1

input.bb-input会这样做。属性选择器和类选择器具有相同的特定。类型选择器正在为第一个选择器添加额外的特异性。

Answer 2

第一个选择器比第二选择器更具体：

CSS Specifity 免责声明：这是我的博客

类和属性具有相同的权重。问题是第一个选择器input[type="text"]也有输入元素，这使它更具体。

您可以解决的一种方法是将第二个选择器重命名为

input.bb-input {
   ...
} 

Answer 3

内联样式具有最高优先级，因此请使用内联样式

<input type="text" style="background-color: yellow;">

如果没有使用!important，它将覆盖外部