添加覆盖元素background属性的类

Question

我有一个带灰色背景的按钮列表，当点击一个按钮时，我想将按钮的背景颜色更改为蓝色。我已经尝试了jQuery的“addClass”并添加了一个具有不同背景的类，但它没有覆盖元素背景（使用默认类设置）。我可以删除默认类，但我需要保留它，因为它用于触发其他事件。

我该怎么做（如果这种方式甚至可能的话）？

提前致谢！

Answer 1

您可以使用内联css，它将覆盖默认值;或者在使用jQuery.addClass（）添加的类中，使用！important;即.btnCool {background：red！important;}

Answer 2

我认为问题出在您的.css文件中。 尝试设置包含两个类的新css规则。

你会有这个：

.class1 { styles }
.class1 .class2 { styles } //more specific, higher priority

希望它有所帮助！

Answer 3

$('.btns').click(function(){
   this.css({backgroundColor:'blue'});
});

或

.blue{background-color:blue!important}
$('.btns').click(function(){
   this.addClass('blue');
});

Answer 4

您可能应该添加一些代码示例，因为它可以有许多不同的变体，但这里的答案是假设您的大部分代码非常标准：

CSS样式有一个层次结构，可以帮助他们决定使用哪个属性。

示例：

.button{
   background: blue;
}
.button.clicked{
   background: red;
}

每当你点击一个按钮时，第二个规则将赢得参数，因为它通过 2个类 而不是一个来引用元素。< / p>

如果你将一个颜色设置为一个元素两次，一旦使用它的类来引用它，并且一旦使用它的id，id参考下的规则将获胜，因为它具有更高的优先级

Answer 5

试试这个fiddle