Теоретически, если у вас был такой сценарий:
<style type="text/css">
.class1 {
color:#F00 !important;
}
.class2 {
color:#00F !important;
}
</style>
<p class="class2 class1">Test</p>
Какой цвет должен иметь приоритет? Как браузеры определяют приоритет в этом сценарии?
Согласно этому источнику: http://www.boogiejack.com/CSS_4.html
class2 должен переопределить стиль class1.
Заказ Спецификации: как последний курорт, когда все остальные конфликты разрешение не может определить, какой стиль должен принимать приоритет, указанный последний стиль будет использован стиль.
С двумя одинаково взвешенными селекторами поведение одинаково, независимо от того, применяете ли вы !important к обоим и не добавляете их из обоих.
<style type="text/css">
.class1 {
color: #F00; /* red */
}
.class2 {
color: #00F; /* blue */
}
</style>
Порядок классов в атрибуте класса html не зависит от уровня специфичности селектора класса.
<p class="class2 class1">Test X</p>
<p class="class1 class2">Test Y</p>
Выход
Если вы используете !important только для одного класса селектора, то этот будет иметь приоритет (потому что он принимает более высокий уровень специфичности).
Так как классы все "одинаково важны" при добавлении к элементу, это не имеет значения, в каком порядке вы назначаете их вашему абзацу.
В этом случае color в .class1 и .class2 объявляются как важные, но поскольку .class2 объявлен после .class1, браузер отобразит ваш абзац синим цветом, поскольку он перезаписывает объявленный цвет из .class1
Кроме того, взгляните на это: http://jsfiddle.net/3uPXx/1/
Вы можете видеть, что это не имеет значения, в каком порядке вы объявляете класс в своем абзаце. Поскольку оба класса определяют один и тот же атрибут (color), он будет перезаписан классом, объявленным последним.
Единственное, что может переписать это, - это встроенный стиль с важными, как вы можете видеть в скрипте.