Если у вас есть два конфликтующих правила CSS относящихся к одному элементу, браузер следует нескольким принципам для определения какое из правил более приоритетное.
Это может показаться не столь важным и в большинстве случаев у вас не будет никаких проблем, но чем больше и сложнее становится таблица стилей или чем больше стилевых файлов вы используете, тем больше вероятность возникновения конфликтов.
Если у вас есть два одинаковых селектора, то приоритет будет иметь последний.
p { color: red } p { color: blue }
Элемент p будет синего цвета, т.к. это правило последнее.
Однако вероятнее всего у вас не будет одинаковых селекторов с конфликтующими правилами, потому что в этом нет смысла. Скорее всего конфликты появятся если вы используете вложенные селекторы.
div p { color: red } p { color: blue }
Может показатся что элемент p вложенный в div будет синего цвета, т.к. правило p {color: blue} самое последнее, но на самом деле он будет красного цвета из-за специфичности первого селектора. Чем больше специфичен селектор, тем больше у него приоритетность.
Специфичность вложенных селекторов требует некоторых расчетов. Все id селекторы (#something) приравниваются к 100, селекторы класса (.something) равны 10, а каждый HTML элемент равен 1.
p— имеет специфичность равную 1 (один HTML элемент);div p— имеет специфичность равную 2 (два HTML элемента);.tree— имеет специфичность равную 10 (один селектор класса);div p.tree— имеет специфичность равную 12 (два HTML элемента и один селектор класса);#baobab— имеет специфичность равную 100 (одинidселектор);body #content .alternative p— имеет специфичность равную 112 (два HTML элемента, одинidселектор и один селектор класса).
Наибольший приоритет имеют инлайновые стили (атрибут style) и приравниваются к 1000.
Источник: Specificity
забыл про инлайновые стили, у них самая высокая приоритетность
body #content .alternative p не будет работать в IE
Про инлайновые стили спасибо, учту. А
body #content .alternative pв IE нормально работает .А можно узнать источник? В частности интересуют веса селекторов…
Источник чего и какие селекторы интересуют конкретно.
Собственно источник
Спасибо. Это именно то, что я спрашивал.
2 Alex : в какой его версии работает?
Проверял в 6-й
Alex, а изначального автора указать не хотите? Вот отсюда.
Источник — CSS — каскадные таблицы стилей. Подробное руководство. Э.Мейер
Про импотента забыли — {.style !important;}
Сколько добавляет?
Если специфичность оценивается численно, то используется не десятичная система. Тоесть там основание не 10. Основание зависит от того, сколько классов, id и имен тегов используется в селекторах (берется максимум). Берется селектор с максимальным количеством.
Если, например, в одном селекторе используется 22 тега и 1 класс, а в другом 2 класса, то более приоритетным будет второй селектор, а не первый. Просто вряд ли где в реальной жизне вам понадобится селектор с 22 тегами.
Однако я могу привести пример и более практический. Например в статье утверждается, что специфичность css-правил в теге style равна 1000. Тоесть css-правила из css-файлов имеют все шансы быть более специфичными. Однако тег style имеет самый высокий приоритет в независимости от того сколько id вы использовали в селекторах, находящихся в css-файлах.
Если хотите более правильно понять концепцию специфичности, то вам сюда http://web-linux.ru/?p=479
Спасибо за статью