Специфичность

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

Это может показаться не таким уж важным, и в большинстве случаев вы вообще не столкнётесь ни с какими конфликтами, но чем больше и сложнее становятся ваши CSS-файлы или чем большим количеством CSS-файлов вы начинаете манипулировать, тем больше вероятность возникновения конфликтов.

Более конкретная = больший приоритет

Если селекторы одинаковы, то последний из них всегда будет иметь приоритет. Например, если у вас был:

p { color: red }
p { color: blue }

Текст в поле p элементов будет окрашен в синий цвет, потому что это правило появилось последним.

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

div p { color: red }
p { color: blue }

В этом примере может показаться, что a p внутри a div будет окрашено в синий цвет, поскольку, как правило, для окрашивания p блоков синий цвет идёт последним, но на самом деле они будут окрашены в красный цвет из-за специфичности первого селектора.

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

Вычисление специфичности

Фактическая специфичность группы вложенных селекторов требует некоторых вычислений. Вы можете присвоить каждому селектору идентификаторов (“#whatever”) значение 100, каждому селектору классов (“.whatever”) значение 10 и каждому селектору HTML (“whatever”) значение 1. Когда вы складываете их все, вуаля, вы получаете значение специфичности.

p имеет специфичность 1 (1 HTML-селектор)
div p имеет специфичность 2 (2 HTML-селектора, 1 + 1)
.tree имеет специфичность 10 (1 селектор класса)
div p.tree имеет специфичность 12 (2 селектора HTML + селектор класса, 1+1+10)
#baobab имеет специфичность 100 (1 идентификатор селектора)
body #content .alternative p имеет специфичность 112 (HTML-селектор + id-селектор + class-селектор + HTML-селектор, 1+100+10+1)
Итак, если бы использовались все эти примеры, div p.tree (со специфичностью 12) одержал бы верх над div p (со специфичностью 2) и body #content .alternative p одержал бы победу над всеми ними, независимо от порядка.

Страницы в тему:

Примеры CSS:

Добавить комментарий