Почему CSS .addClass не применяет подходящий стиль для каждой специфики?

Question

Я понимаю концепцию специфики css. Вот моя ситуация:

У меня есть стиль для класса под названием «успех». Это просто делает цвета зелеными ... и т. Д. Теперь у меня есть 2 отдельных файла css, которые определяют .success (они определяют другой стиль). Назовем эти Site.css и Page.css.

Класс в site.css просто:

.success { color: green; } 

Класс в Page.css более указано:

#MainRegion div .resultPanel .success { background-color: green; } 

Сейчас в JavaScript (с помощью JQuery), добавить класс как так:

$("#MainRegion div .resultPanel").addClass("success"); 

Теперь, когда я инспектировать это с помощью браузера-отладчик (F12), я могу видеть, что стиль site.css было приложение лживый (а не Page.css). Я думал, что класс, определенный в Page.css, обладает большей специфичностью, поэтому он должен быть тем, который вызывается. Я что-то пропустил о своем понимании того, как работает спецификация css?

Answer 1

Вам что-то не хватает. Эта строка кода

$("#MainRegion div .resultPanel").addClass("success"); 

возвращает

#MainRegion div .resultPanel.success 

<div class="resultPanel success"></div> 

и не

#MainRegion div .resultPanel .success 

<div class="resultPanel"> 
    <div class="success"></div> 
</div> 

Поэтому в зависимости от того, что вы хотите, вы можете изменить свой CSS или JS для нацеливания правильного элемента

если ваш css

#MainRegion div .resultPanel.success { background-color: green; } 

тогда ваш JS будет работать, как ожидалось

Answer 2

Честно говоря, вы должны, вероятно, создать другой класс для успеха на одном из ваших таблиц стилей. Если я правильно понимаю, у вас будет зеленый BG с зеленым цветом шрифта. Обе таблицы стилей должны работать вместе, поскольку вы определяете разные вещи для обоих вызовов, но это не лучшая практика.