Блог

Я знаю, что можно указать несколько классов для элемента в HTML:

 <div class='one two'>Text</div>
  

Похоже, что классы доступны из Javascript в виде одной строки.

Что происходит, когда классы указаны с конфликтующими свойствами? Например

 div.one {
  background-color: red; 
  color: blue;
}
div.two {
  background-color: green;
}
  

Будет ли результат зависеть от порядка, в котором указаны классы? Например, могу ли я разумно ожидать, что приведенный выше div появится с синим текстом и зеленым фоном, потому two что класс вычисляется вторым, перезаписывая background-color свойство?

Читайте о специфике:

• Простое объяснение
• Более подробное объяснение

Краткий ответ: если два селектора имеют одинаковую специфику, выигрывает последний объявленный.

CSS имеет очень четко определенный порядок приоритета.

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

В приведенном вами примере это означало бы, что div.two стили будут переопределяться div.one , где одно и то же свойство определено в обоих.

Кстати, это также та же функция, которая позволяет вам определять несколько стилей с одним и тем же свойством в одном селекторе для поддержки разных функций браузера. Например, некоторые браузеры могут не поддерживать цвета rgba, поэтому вы можете сделать следующее:

 .myclass {
    background: rgb(200, 54, 54);
    background: rgba(200, 54, 54, 0.5);
}
  

Все браузеры будут выбирать последнее background объявление, которое они поддерживают, поэтому браузеры, которые поддерживают rgba , выберут второе, в то время как браузеры, которые этого не делают, обойдутся первым.

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

Если селекторы имеют одинаковый уровень приоритета (как здесь), приоритет имеет то, что указано позже. В этом случае фон должен быть зеленым, а цвет шрифта — синим.

Из спецификации CSS:

Наконец, сортировка по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфику, последнее указанное выигрывает. Объявления в импортированных таблицах стилей считаются предшествующими любым объявлениям в самой таблице стилей.

То, что вы используете для их оформления, называется «каскадными таблицами стилей». Каскадная часть означает, что это похоже на водопад, и будущие правила основаны на (или перезаписывают) предыдущие. Таким образом, второе правило перезапишет свойство background-color, но оно все равно сохранит цвет шрифта.

(однако будьте осторожны с приоритетом. правило, исходящее из идентификатора, имеет более высокий приоритет по сравнению с правилом, исходящим из класса, независимо от того, где они размещены.)

http://jsfiddle.net/mrtsherman/2NpXS/

Зависит от порядка таблицы стилей. Более поздние объявления стиля имеют приоритет. Вы можете инвертировать две строки css, чтобы увидеть.

Результат зависит от порядка, в котором указаны классы.

Вот хороший обзор порядка, в котором выполняются правила CSS: http://htmlhelp.com/reference/css/structure.html