Приоритет нескольких классов, определяющих свойство цвета, задается порядком декларации, а не порядком спецификации

Учитывая два класса одинаковой специфичности, определяющих свойство цвета, я думал, что последний класс, указанный в атрибуте class элемента, будет иметь приоритет.

Из http://htmlhelp.com/reference/css/structure.html:

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

В следующем примере вакуумного кода порядок, в котором задан набор правил класса, определяет приоритет. Здесь имеет приоритет последнее или последнее определение набора правил класса.

<style>
    .makeBlue {color: blue;}
    .makeGreen {color:green;}
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

Текст вывода зеленый.

Если я поменяю порядок объявления класса и сначала объявлю .makeGreen

<style>
    .makeGreen {color:green;}
    .makeBlue {color: blue;}        
</style>
<div>
    <p class="makeGreen makeBlue">makeGreen makeBlue</p>
    <p class="makeBlue makeGreen">makeBlue makeGreen</p>
</div>

Текст вывода синий.

Я никогда не замечал этого раньше. edit Я думал, что изменить последний класс, указанный в атрибуте класса элемента, имеет приоритет.

изменить Чтобы уточнить → Иногда я думаю о элементе как о домашнем животном, скажем, о собаке. Я вижу добавление класса к атрибуту class элемента как выдачу команды собаке. Если я скажу ему сесть, а потом скажу, что он ложится, я ожидаю, что собака ляжет. Я не ожидаю, что собака останется сидеть просто потому, что я научил ее сидеть после (совсем недавно), я научил ее лежать.

Итак... два вопроса.

  • Это так, как это должно быть? ответил
  • Если так... почему? Я не вижу преимущества того, что нужно копать в классе  декларации, чтобы определить, что было объявлено перед другим.

Большое спасибо!

Ответы

Ответ 1

Порядок классов, заданных вами по элементам, не имеет значения. Это порядок, который вы определяете в своих декларациях стиля. Цитата, которую вы указали, означает в объявлениях стиля, а не порядок, в котором классы указаны в элементах.

Ответ 2

Это, по-видимому, ограничивает параметры. Если я хочу использовать два класса в двух разных абзацах, но приоритет должен быть другим, мне нужно будет определить третий класс, который будет таким же, как первый определенный класс, но с немного другим именем.

e.g

.xxxxx {margin-top: 1em; margin-left: 0; text-align: left; ... [some other attribute definitions]}<br/>

.yyyyy {margin-top: 3em; margin-left: 1em; text-align: justify; ... [some different attribute definitions]}

<p class="yyyyy xxxxx">...</p>

всегда будет использовать верхний край 3em с левым полем 1em и выравниванием текста, чтобы оправдать плюс другие атрибуты в xxxxx и yyyyy. Однако может возникнуть ситуация, когда я хочу переопределить параметры margin-top, margin-left и text-align, сохраняя все остальные атрибуты в xxxxx и yyyyy. Если приоритет был определен по порядку в атрибуте class, тогда у меня был бы этот параметр, выполнив следующее:

<p class="xxxxx yyyyy">...</p>

Так как это не так, я должен создать другое определение под этими двумя, так как:

.zzzzz {margin-top: 1em; margin-left 0; text-align: left; ... [some other attribute definitions]}

и используйте

<p class="yyyyy zzzzz">...</p>

Это кажется неоптимальным решением проблемы, в то время как приоритет порядка атрибутов атрибутов позволяет больше гибкости, не опуская CSS.

BTW, Nook Glowlight делает это так, как это должно быть сделано, позволяя мне устанавливать приоритет по порядку в атрибуте class. И, таким образом, мой css немного компактнее.

Если в моих десятилетиях программирования есть что-то, чему я научился, то это приоритет лучше всего подходит как можно ближе к тому, где все будет сделано. Размещение приоритета в связанной статической таблице стилей снижает гибкость.