Специфика

Переклад українською: Специфіка

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

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

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

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

Элемент p всегда будет синего цвета, т.к. соответствующее правило указано последним.

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

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

Выглядит так, будто элементы p в пределах элемента div будут показаны синим цветом, потому что правило, которое устанавливает цвет p, указано последним. Однако на самом деле они будут показаны красным цветом из-за специфичности первого селектора. Говоря простым языком, приоритет в конфликтных ситуациях увеличивается вместе со спецификой селектора.

Настоящая специфика группы вложенных элементов требует вычислений. По существу, вы приравниваете каждый селектор id («#anything») к значению 100, каждый селектор class («.anything») к 10, а каждый селектор HTML («anything») к 1. Затем вы складываете их значения, а общий результат и будет вашим значением специфики.

p имеет специфику 1 (1 HTML селектор)
div p имеет специфику 2 (2 HTML селектора; 1+1)
.tree имеет специфику 10 (1 селектор class)
div p.tree имеет специфику 12 (2 HTML селектора и 1 селектор class; 1+1+10)
#baobab имеет специфику 100 (1 селектор id)
body #content .alternative p имеет специфику 112 (HTML селектор, id селектор, class селектор, HTML селектор; 1+100+10+1)

Таким образом, в случае, если все эти примеры будут использованы, div p.tree (со спецификой 12) будет более специфичен, чем div p (со спецификой 2), а body #content .alternative p будет более специфичем, чем все они, независимо от порядка.