如何確保一個類總是應用於jQuery元素？

有時當我們使用諸如jQuery UI之類的插件時，它會添加一個類並覆蓋existig樣式。但我想確保我自己的類總是應用於元素。如何確保一個類總是應用於jQuery元素？

.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，因爲它在後面。

來源

2013-04-08 user1643156

風格並不像那樣。這是一個專一的問題，

"The last rule defined overrides any previous, conflicting rules."

source

基本上，無論哪個順序用於應用這兩種風格，plugin_style或red的最後一個定義是一個將採取優先。您可以看到最後定義了plugin_style，因此樣式優先於red，導致文本保持爲blue。

如果你要切換它們的順序，那麼紅會優先考慮（demo）：

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

來源

2013-04-08 04:05:59

'最後一條規則定義覆蓋任何previous'，我不知道。好吧，我們說我無法改變他們定義的順序。如何在不使用'.css（「color」，「red」）'的情況下調用doSomething時如何應用.red？ – user1643156 2013-04-08 04:11:54

如何確保一個類總是應用於jQuery元素？

回答

相關問題