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

Специфичность в CSS
Все мы знаем, что каскадирование — это природное свойство каскадных таблиц стилей (CSS), заложенное уже в самом их названии. Мы будем говорить об CSS одного уровня, абстрагируясь от таких понятий, как стили браузера, пользовательские стили, правило important! и атрибуты style.

В этом случае правило перекрытия стилей очень простое: стилевое правило, описанное ниже по тексту (или в таблице, присоединенной ниже по тексту), переопределит предыдущее описание. Например, в начале таблице стилей мы определили зеленый цвет для ссылок (a {color:green}). А через несколько строк написали новое стилевое правило: a {color:blue}. Естетственно, ссылки в документе станут синего цвета. О чем здесь еще гворить?

Однако, не все так просто! Давайте посмотрим на пример. Возникает вопрос: почему же не переопределился цвет ссылок в первом списке, как это предусмотрено правилом каскадности? Вот еще один, более практичный пример. Почему не увеличился кегль активного пункта? Такое может случится, когда мы используем меню какого-нибудь «бутстрапа» и пытаемся подстроить его под свой дизайн.

Причина таких неприятностей кроется в незнании еще одного правила каскадирования стилей, которое называется специфичностью. Оказывается, разные типы селекторов имеют разную специфичность. Селектор тега ( a или li или div и т.д.) имеет специфичность 1. У селектора класса специфичность 10, а у селектора идентификатора — целых 100! Посмотрим на наш первый пример. Первый селектор имеет специфичность 101 (100 за #first + 1 за a). А второго селектора специфичность всего лишь 1. Поэтому второй селектор и не может переопределить первый. Во втором примере специфичность второго селектора только 10 (за класс), и он тоже не может переопределить более специфичный первый селектор.

Решение проблемы во всяком случае очень простое. Достаточно просто выровнять специфичность селекторов и основное правило каскадирования снова вступит в силу. Наглядный пример. А чтобы поменьше попадать в такие ситуации, любителям «бутстрапов» практический совет. Если хотите изменить стиль элемента, не пытайтесь сделать это, добавляя к элементу свой класс. Используя инспектор объектов, найдите стилевые правила, которые определяет ваш фреймворк (или модуль, или сниппет). И уже в эти стилевые правила вносите свои изменения.

Подробнее о специфичности можно почитать у Влада Маржевича.

5 комментариев

avatar
На кой черт нужна эта специфичность, только запутывает.
avatar
не понял кое чего..
говорят тут не переопредилилось (http://jsfiddle.net/22rVK/8/)
странно а у меня вроде норм, большими буковками написано!
avatar
Во втором списке стиль срабатывает, но это не переопределение, а обычное определение, чтобы показать, что стиль назначен без ошибки. И вообще, это абстрактные примеры, для подумать!
Это вам не видеоуроки попова, где нужно нажимать строго те же кнопки, что и великий гуру.
avatar
«Любить бутстрап» это еще не преступление обычно переопределения стилей в грамотно составленной структуре можно и избежать, допустим, можно не брать готовое меню из набора а сделать свое, расположив блоки с помощью стилей bootstrap, тогда ничего перекрывать не придется