Введение в использование CSS селекторов
Допустим, у Вас есть несколько селекторов которые ссылаются на один и тот же элемент:
div span { text-decoration:underline; }
span { text-decoration:none; }
Открыв HTML страницу где элемент span находится внутри элемента div мы увидим подчеркнутый текст. А если мы пойдем дальше и с помощью плагина Firebug посмотрим стили вложенного элемента, мы увидим следующее:
div span {
text-decoration:underline;
}
span {
text-decoration:none;
}
Сразу же возникает вопрос о причине такого поведения. Ведь второй селектор должен перекрывать первый учитывая каскадность стилей. Данный пример как нельзя четко показывает что такое специфичность селекторов.
Правила специфичности
Специфичность селекторов (selector's specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
В спецификации по CSS 2.1 этой теме посвящен небольшой раздел. Существует 4 правила по которым вычисляется специфичность селекторов:
- Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
- Второе место занимает присутствие ID в селекторе(#some-id).
- Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
- Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).
Все 4 правила сводяться в одну систему a-b-c-d(где а - наивысший приоритет) и образуют специфичность.
Далее рассмотрим принцип построения такой системы специфичности на примере разнообразных селекторов:
| Селектор | Специфичность a-b-c-d | Правило № |
|---|---|---|
| * | 0-0-0-0 | - |
| li | 0-0-0-1 | 4 |
| li:first-line | 0-0-0-2 | 4 |
| ul li | 0-0-0-2 | 4 |
| ul ol+li | 0-0-0-3 | 4 |
| form + *[type=text] | 0-0-1-1 | 3, 4 |
| table tr td.second | 0-0-1-3 | 3, 4 |
| h2.block.title. | 0-0-2-1 | 3, 4 |
| #xyz | 0-1-0-0 | 2 |
| style=" " | 1-0-0-0 | 1 |
Пример специфичности - правило №1:
<head>
<style type="text/css">
#summary { color: red }
</style>
</head>
<body>
<p id="summary" style="color: blue">content</p>
</body>
Текст внутри элемента p будет отображаться синим цветом независимо от селектора с айди(id), где также указано свойство color со значением red. Правило номер 1 всегда перекрывает все селекторы и имеет наивысшую приоритетность.
Правило №2:
<head>
<style type="text/css">
#second { color:green; }
ul li.second { color:blue; }
</style>
</head>
<body>
<ul>
<li>first</li>
<li class='second' id="second">second</li>
</ul>
</body>
Несмотря на то что селектор с id указан в стилях сверху, именно он повлияет на отображение документа, так как более специфичен нежели селектор с классом second.
Правило №3:
<head>
<style type="text/css">
input[type=text] { font-weight:bold; }
form input { font-weight:normal; }
</style>
</head>
<body>
<form action="" method="post">
<input type="text" name="Company" />
<input type="submit" name="Ok" />
</form>
</body>
Текст внутри поля ввода будет отображаться жирным, а второй селектор определит стили только для кнопки отправки запроса.
Вернемся к первому примеру этой статьи - правило №4:
div span { text-decoration:underline; }
span { text-decoration:none; }
Первый селектор выигрывает у второго потому что включает в себя 2 последних правила специфичности, в то время как второй - всего одно. Чтобы убрать декорирование текста в данном случае следует использовать класс или более специфичный селектор:
div span { text-decoration:underline; }
body span { text-decoration:none; }
Теперь селекторы имеют одинаковый вес(0-0-0-2 = 0-0-0-2) касательно специфичности. Второй селектор просто перекроет свойство первого так как описан ниже.
Уверен, что большинство верстальщиков точно знают 2 первых правила специфичности селекторов про id и style и эта статья не была для них чем-то новым. Но не стоит забывать о двух оставшихся, ведь это может существенно приостановить процесс создания верстки и увеличить время выявления возникшей ошибки.
Вот и все о чем я хотел рассказать. Надеюсь, что статья была вам интересна.
--
Владислав Razor Чапюк, апрель 2009
