От автора: на сайте CSS Tricks есть множество материалов по теме специфичности CSS селекторов. Основная статья это «Особенности в специфичности CSS селекторов», которая за этот год уже несколько раз обновлялась. Когда статья была опубликована в 2008 году, информация в ней была написана слегка запутанным языком. Прошло много времени с тех пор, как текст был исправлен, однако те ошибки до сих пор интересны.
В оригинальной статье говорилось, что специфичность задается целым числом integer. Т.е. селекторы типа #main article.news p:first-child перечисляются в формате 0122: ID 1, 2 класса и 2 тега. Ошибка? По такому принципу похоже, что специфичность работает по десятичной системе счисления. А скажем, значение специфичности было бы 0129 – если бы это была десятичная система, то при добавлении еще одного селектора значение бы стало 130, а происходит совсем не это.
Джонатан Снук сразу же поправил меня: «… если к элементу применено 11 классов, то он не будет старше тега с одним ID»
А Эрик Мейер подтвердил: «Специфичность задается не в десятичной системе счисления. Она не основано на чем-то похожем: на деле специфичность селекторов бесконечна» (Вы даже можете найти комментарий Гарри Робертса!)
Основное отличие при записи значения специфичности в запятых. Значение не выглядит одним числом. 0122 на самом деле 0, 1, 2, 2. Диаграмма, появившаяся в следующих обновлениях постов, намного лучше передает смысл:
Первая цифра определяет, есть ли у тега инлайновые стили или нет. Значение может принимать 0 или 1. Остальные же цифры бесконечны. Я считаю, это можно записать так: [0 or 1], ∞, ∞, ∞
Цифра в старшей колонке может побить любую цифру из меньшей колонки. 0, 1, 0, 0 больше чем 0, 0, 312, 54659392. Вот именно поэтому крайне популярен подход никогда не использовать ID и поддерживать низкую специфичность селекторов.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
