jquery - 添加覆盖元素背景属性的类

Question

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

我该怎么做（如果甚至可以这样）？

提前致谢！

Answer 1

您可以使用内联 css，它将覆盖默认值；或者在使用 jQuery.addClass() 添加的类中，使用 !important; 即.btnCool {背景：红色！重要；}

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 个类而不是一个类来引用元素。

非常相似，如果你为一个元素设置了两次颜色，一次使用它的类来引用它，一次使用它的id，id引用下的规则将获胜，因为它具有更高的优先级

Answer 5

试试这个小提琴