0

有时当我们使用 jQuery UI 之类的插件时，它会添加一个类并覆盖现有样式。但我想确保我自己的类始终应用于元素。

.red {color: red;}
.plugin_style {color: blue;}

<p id="foo" class="red">foo</p>
<a href="#" id="doSomething">do something</a>

$.fn.doSomething = function() {
    $(this).css("border", "1px solid #f00").addClass("plugin_style");
    return $(this);
};

$("#doSomething").on("click", function() {
    // this adds class "plugin_style"
    // generated source: class="red plugin_style"
    $("#foo").doSomething();

    // remove "red"
    // generated source: class="plugin_style"
    $("#foo").removeClass("red");

    // add "red"
    // generated source: class="plugin_style red"
    $("#foo").addClass("red");
});

通过删除和添加红色类，红色会在生成的源代码中的所有其他类之后出现，并且应该覆盖在 plugin_style 中定义的样式。但颜色仍然是蓝色的。

有人可以解释一下吗？

更新

通过添加!important可以始终保持 .red 应用。但是没有它， .red 也应该覆盖 .plugin_style ，因为它紧随其后。

4

1 回答 1

3

这种风格不太像那样。这是一个特异性问题，并且

“定义的最后一条规则会覆盖任何以前的冲突规则。”

来源

基本上，无论使用哪种顺序来应用这两种样式，plugin_style或者red，最后一个定义的都是优先的。你可以看到你已经定义plugin_style了 last ，因此 style 优先于red导致 text to保持blue。

如果您要切换它们的顺序，则红色优先（demo）：

.plugin_style {color: blue;}
.red {color: red;}
于 2013-04-08T04:05:59.457 回答