Важен ли порядок правил в одном файле CSS?

Question

Имеет ли значение порядок правил в одном файле CSS?

<div id="wrapper>
    <div id="a>
        section a
    </div>
    <div id="b>
        section b
    </div>
    <div id="c>
        section c
    </div>
</div>

Может ли правило div для #c быть ниже #a и #b, или будет ясно: оба не будут работать?

#wrapper {
color: #CCC;
}

#c {
clear:both
}

#a {
float: right;
}

#b {
float: left;
}

Answer 1

Порядок действительно важен.

См. http://msdn.microsoft.com/en-us/library/aa342531%28VS.85%29.aspx#specf

Цитировать, частично:

3. Сортировка по специфичности селектора: селекторы с более высокой специфичностью переопределяют более общие селекторы. Специфичность вычисляется путем объединения количества (a) атрибутов ID, (b) атрибутов класса и псевдокласса и (c) имен типов и псевдоэлементов в селекторе.

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

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */  
li            {}  /* a=0 b=0 c=1 -> specificity =   1 */  
ul li         {}  /* a=0 b=0 c=2 -> specificity =   2 */ 
li:first-line {}  /* a=0 b=0 c=2 -> specificity =   2 */
ul ol+li      {}  /* a=0 b=0 c=3 -> specificity =   3 */
li.class      {}  /* a=0 b=1 c=1 -> specificity =  11 */
li#id         {}  /* a=1 b=0 c=1 -> specificity = 101 */ 

4.Сортировать по указанному порядку: если два правила имеют одинаковый вес и специфику, последнее проанализированное выигрывает . (Обратите внимание, что таблицы стилей, указанные с помощью правила @import, анализируются первыми.) Селекторы, которые появляются позже в таблице стилей, будут использоваться в случае любого конфликта. По этой причине селекторы псевдоклассов ссылок всегда должны использоваться в следующем порядке.

Также см. http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ для более широкого описания с большим количеством примеров.

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

Answer 2

Порядок имеет значение только в том случае, если правила применяются к одному и тому же атрибуту одного и того же элемента. (В этом случае последнее правило «выигрывает».) В вашем примере порядок не имеет значения.

Answer 3

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

Если у вас есть стиль:

.foo { color: red; }
.bar { color: blue; }

И разметка:

<div class="foo bar">Test</div>

Тогда текст в div будет окрашен в синий цвет. Если вы измените порядок правил, он будет красным.