Несколько! Важных объявлений классов и приоритетов

Question

Теоретически, если у вас был такой сценарий:

<style type="text/css">
    .class1 {
        color:#F00 !important;
    }
    .class2 {
        color:#00F !important;
    }
</style>

<p class="class2 class1">Test</p>

Какой цвет должен иметь приоритет? Как браузеры определяют приоритет в этом сценарии?

Answer 1

По данным этого источника: http://www.boogiejack.com/CSS_4.html

class2 должен переопределить стиль class1.

Порядок спецификаций. В крайнем случае, когда все другие спецификации разрешения конфликтов не могут определить, какой стиль должен иметь приоритет, последним указанным стилем будет используемый стиль.

Answer 2

С двумя одинаково взвешенными селекторами поведение одинаково, применяете ли вы !important чтобы оба или опустить его от обоих.

<style type="text/css">
    .class1 {
        color: #F00; /* red */
    }
    .class2 {
        color: #00F; /* blue */
    }
</style>

Порядок классов в атрибуте html class не зависит от уровня специфичности каждого селектора класса.

<p class="class2 class1">Test X</p>
<p class="class1 class2">Test Y</p>

Выход

• Тест X → синий
• Тест Y → синий

Если вы используете !important только для одного класса селектора этот класс будет иметь приоритет (поскольку он имеет более высокий уровень специфичности).

Answer 3

Поскольку все классы одинаково важны при добавлении к элементу, не имеет значения, в каком порядке вы присваиваете их своему абзацу.

В этом случае, color в .class1 а также .class2 оба объявлены как важные, но поскольку.class2 был объявлен после.class1, браузер покажет ваш абзац синим цветом, поскольку он перезаписывает объявленный цвет из .class1

Также посмотрите на это: http://jsfiddle.net/3uPXx/1/ Вы можете видеть, что не имеет значения, в каком порядке вы объявляете класс в своем абзаце. Поскольку оба класса определяют один и тот же атрибут (color) он будет перезаписан тем классом, который объявлен последним.

Единственная вещь, которая может перезаписать это, - это встроенный стиль с! Важным, как вы можете видеть на скрипке.