Как браузеры разрешают конфликтующие классы?

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

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

Кажется, что классы доступны из Javascript как одна строка.

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

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

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

Ответы

Ответ 2

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

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

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Здесь хорошая запись о порядке выполнения правил CSS: http://htmlhelp.com/reference/css/structure.html