Специфичность
Специфичность является некоторой характеристикой, которую каждый автор CSS должен понимать и думать о ней. Можно представлять ее как меру того, насколько конкретным является селектор некоторого правила. Селектор с низкой специфичностью может соответствовать многим элементам (такой как *, который соответствует каждому элементу в документе), в то время как селектор с высокой специфичностью может соответствовать только одному элементу на страницу (такой как #nav, который соответствует только элементу с id совпадающим с nav).
Специфичность селектора можно легко вычислить, как мы скоро покажем. Если два или больше объявлений конфликтуют за данный элемент, и все объявления имеют одинаковую важность, то победителем в правиле будет объявление с наиболее специфичным селектором.
Специфичность имеет четыре компонента, давайте назовем их a, b, c и d. Компонент "a" является наиболее разграничивающим, "d" — наименее.
Компонент "a" очень простой: это 1 для объявления атрибута style, иначе это 0.
Компонент "b" является числом селекторов id в селекторе (тех, которые начинаются с #).
Компонент "c" является числом селекторов атрибутов, включая селекторы классов - и псевдо-классов.
Компонент "d" является числом типов элементов и псевдо-элементов в селекторе.
После небольшого подсчета можно получить строку из этих четырех компонентов, определяющую специфичность для любого правила. Объявления CSS в атрибуте style не имеют селектора, поэтому их специфичность всегда будет 1,0,0,0.
Давайте рассмотрим несколько примеров - после этого должно быть вполне понятно, как это работает.
|
Селектор |
a |
b |
c |
d |
Специфичность |
|
h1 |
0 |
0 |
0 |
1 |
0,0,0,1 |
|
.foo |
0 |
0 |
1 |
0 |
0,0,1,0 |
|
#bar |
0 |
1 |
0 |
0 |
0,1,0,0 |
|
html>head+body ul#nav *.home a:link |
0 |
1 |
2 |
5 |
0,1,2,5 |
Рассмотрим подробнее последний пример. Мы имеем a=0, так как это селектор, а не объявление в атрибуте style. Имеется один селектор ID (#nav), поэтому b=1. Имеется один селектор атрибута (.home) и один псевдо-класс (:link), поэтому c=2. Имеется пять типов элементов (html, head, body, ul и a), поэтому d=5. Окончательная специфичность будет иметь вид 0,1,2,5.
Стоит отметить, что соединяющие символы (такие как >, + и пробел) не влияют на специфичность селектора. Универсальный селектор (*) также не влияет на специфичность.
Стоит также отметить, что имеется значительная разница в специфичности между селектором id и селектором атрибута, который ссылается на атрибут id. Хотя они соответствуют одному элементу, они имеют очень разную специфичность. Специфичность #nav будет 0,1,0,0, в то время как специфичность [id="nav"] будет только 0,0,1,0.
Давайте посмотрим, как это работает на практике.
Начнем с добавления еще одного параграфа в документ HTML.
<body>
<h1>Heading</h1>
<p>A paragraph of text.</p>
<p>A second paragraph of text.</p>
</body>
Добавим правило в таблицу стилей, чтобы изменить цвет текста в параграфах:
p {
color: cyan;
}
Сохраните оба файла и перезагрузите документ в браузере, теперь должно быть два параграфа с голубым (cyan) цветом текста.
Зададим id для первого параграфа, поэтому можно будет легко указать на него с помощью селектора CSS.
<body>
<h1>Heading</h1>
<p id="special">A paragraph of text.</p>
<p>A second paragraph of text.</p>
</body>
Добавим в таблицу стилей правило для специального параграфа:
#special {
background-color: red;
color: yellow;
}
Сохраните оба файла и перезагрузите документ в браузере, чтобы увидеть теперь разноцветный результат.
Давайте посмотрим на объявления, которые применяются к двум этим параграфам.
Первое добавленное правило задает color:cyan для всех параграфов. Второе правило задает красный цвет фона и задает color:yellow для одного элемента, который имеет специальный id.
Красный фон не является проблемой, так как он определен только для #special. Оба правила содержат объявление свойства color, что означает, что имеется конфликт. Оба правила имеют одинаковую важность — они являются обычными объявлениями в таблице стилей автора — поэтому нужно проверить специфичность двух селекторов.
Селектором первого правила является p, который имеет специфичность 0,0,0,1 согласно приведенным выше правилам, так как он содержит один тип элемента. Селектором второго правила является #special, который имеет специфичность 0,1,0,0, так как состоит из селектора id. 0,1,0,0 является значительно более специфичным, чем 0,0,0,1, поэтому объявление color:yellow выигрывает, и вы получите желтый текст на красном фоне.