JQuery中的addClass是否覆盖任何现有的基于css类的样式？

Question

我正在尝试为点击的元素添加一个类。元素已经分配了几个clases，包括一个带边框的。

虽然我知道我可以使用removeClass（）删除当前的CSS类，但我需要该类提供的其他样式。所以我想知道下面的例子，我不能用addClass（）覆盖边框样式是边框是否已经设置了属性？我不想使用内联样式，因为它们不易维护。

CSS：

.dibHighlight{border:1px solid orange;}

JQuery不起作用：

$(this).closest('.drop').addClass('dibHighlight'); // Doesn't work

JQuery有效：

$(this).closest('.drop').css({ border: "1px solid orange" }); // Works

Answer 1

您可以根据CSS specificity的规则使用addClass覆盖其他类，就像CSS类在元素上使用class属性时覆盖/继承属性一样。

你的第二个例子起作用的原因是因为它相当于根据CSS特异性在元素上设置style属性，这是最具体的。

相反，第一个例子不起作用，因为可能有一个比.dibHighlight更具体的CSS类

Answer 2

可能有另一个类优先于CSS中其他地方定义的dibHighlight。您应该使用Firebug （或类似的开发人员工具）测试哪些样式/类应用于您的元素。

或者对于脏快速修复，请尝试以下操作：

.dibHighlight{border:1px solid orange !important;}

Answer 3

下面的类不起作用，因为在css文件中有一些现有的类，其代码低于此类。

.dibHighlight{border:1px solid orange;}

使下面的代码工作只需将上面的css代码粘贴到css文件的最后一行。

$(this).closest('.drop').addClass('dibHighlight');

执行此操作后，当您在jquery中添加带有addClass的类dibHighlight时，它将覆盖现有的类类似属性。

我建议使用toggleClass()代替addClass()，因为如果要添加的类尚不存在，即使toggleClass()也可以作为addClass()使用。