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

Question

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

От 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> 

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

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

редактировать Для уточнения -> я иногда думаю элемент в качестве домашнего животного, скажем, собака. Я вижу добавление класса к атрибуту класса элемента как выдачу команды собаке. Если я скажу ему сесть, а потом скажу, что он ложится, я ожидаю, что собака ляжет. Я не ожидаю, что собака останется сидеть просто потому, что я научил ее сидеть после (совсем недавно), я научил ее лежать.

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

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

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

Answer 1

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

Answer 2

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

e.г

.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 и выравнивание текста по оправдает плюс другие атрибуты в ххххх и YYYYY. Однако может возникнуть ситуация, когда я хочу переопределить параметры margin-top, margin-left и text-align, сохраняя все остальные атрибуты в xxxxx и yyyyy. Если приоритет был определен порядок, в атрибуте класса, то я бы этот вариант, делая это:

<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, The Nook Glowlight делает это так, как это должно быть сделано, позволяя мне устанавливать приоритет по порядку в атрибуте class. И, таким образом, мой css немного более компактен.

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