Наследование стилей и вложенность тегов – расчёт значений специфичности

« Предыдущая запись
 
  Следующая запись »
 

Как показала практика, приоритетность тех или иным прописанных правил CSS для многих остаётся на уровне: “идентификатор имеет приоритет по сравнению с классом, а класс – по сравнению с тегом” и “приоритет файла со стилями меньше, чем у стилей, описанных в style, который меньше, чем стиль, прописанный непосредственно тегу”. И всё. Остальные моменты делаются по наитию. Но что за этим стоит? Давайте займёмся ликбезом!

Итак, описанные выше правила называются ничем иным как “расчётом значений специфичности”. По сути на них строится наследование стилей для вложенных тегов. Те, кто начинал знакомится с CSS по книгам на 95% знакомился с расчётом значений, но, как показал опрос знакомых – на тот момент ничего не понял, а став хорошими девелоперами не стал вникать в азы. Почему? А зачем, если итак всё получается icon smile Наследование стилей и вложенность тегов – расчёт значений специфичности Тем не менее, это довольно интересный момент, который всё таки неплохо было бы знать.

raschet znacheniy specifichnosti Наследование стилей и вложенность тегов – расчёт значений специфичности

Перейдём к делу. Селекторы делятся всего на 4 группы: a, b, c, d. Первая, a – имеет более высокий приоритет, а d – самый низкий. Количество тех или иных селекторов в группах отражается в числовом виде и рассчитывается следующим образом:

a. Если есть встроенный стиль (который описан в теге через style=””), то a=1, а если нет, то a=0.

b. Количество идентификаторов (которые описаны в css через #).

c. Количество классов, псевдоклассов и селекторов атрибутов.

d. Количество селекторов типов элементов и псевдо-элементов.

Определив эти четыре параметра, они записываются как тысячное число abcd. Чем выше это число, тем выше приоритет селектора. Согласитесь, ведь всё просто?

Для наглядности рассмотрим примеры:

Селектор a,b,c,d Число
span 0,0,0,1 1
div span 0,0,0,2 2
.class 0,0,1,0 10
div .class 0,0,1,1 11
.class div 0,0,1,1 11
#id 0,1,0,0 100
#id span 0,1,0,1 101
#id .class 0,1,1,0 110

Если у вас всё ещё остались вопросы, то, возможно, вам будет проще проводить следующий расчёт:

  • За style – 1000 очков
  • За каждый id – 100 очков
  • За каждый class, selector, псевдо-класс – 10 очков
  • За каждый tag и псевдо-элемент – 1 очко

Вот и всё. Хорошей рабочей недели!


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 3, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 2 на запись

"Наследование стилей и вложенность тегов – расчёт значений специфичности"

  1. Интересно, а сколько очков можно дать за div.class и #id.class? :)

  2. Александр Шуйский
    27/08/2014 at 15:58 Постоянная ссылка Цитировать

    ну, 11 и 110, вложенность как-то не играет роль =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии