Как убедиться, что класс всегда применяется к элементу с jQuery?

Question

Иногда, когда мы используем плагин, такой как 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, поскольку он приходит после.

Answer 1

Стиль не совсем такой. Это является проблемой специфичности и

"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;}