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

Question

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

虽然我知道我可以使用 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

score 10 · Accepted Answer

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

您的第二个示例有效的原因是因为它相当于style在元素上设置属性，根据 CSS 特异性，这几乎是最具体的。

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

score 4 · Accepted Answer

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

或者对于肮脏的快速修复，试试这个：

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

score 2 · Accepted Answer

下面的类不起作用，因为在您的 css 文件中有一些现有类的代码在该类之下。

.dibHighlight{border:1px solid orange;}

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

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

这样做之后，当您在 jquery 中使用 addClass 添加类 dibHighlight 时，它将覆盖现有的类相似属性。

我建议使用toggleClass()而不是，addClass()因为即使您要添加toggleClass()的addClass()类不存在，也可以使用。

3 回答 3