Специфичность CSS селекторов бесконечна

Специфичность CSS селекторов бесконечна

От автора: на сайте 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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree