У меня возникают сомнения, по поводу утверждений в карточке [15/18]. Ранее Вы указывали на приоритетность: атрибута style; id; селектора по классу; селектора по тегу - что неоспоримо верно и подтверждается практикой.
В этой же карточке говорится о количественном подсчёте специфичности и возможности суммирования значимости. Исходя из этого, я провёл эксперимент - заключил фразу в 12 тегов, а в CSS назначил правило через селекторы по имени тега. Параллельно было прописано другое правило через (тег .класс), который по таблице набирает лишь 11 баллов.
Исходя из данных карточки, правило в 12 тегов имеет бОльшую приоритетность чем селектор по классу вместе с тегом. На практике это не так.
Если класс прописан к тегу - ближайшему к значению (тексту), то в какое бы количество тегов я не заключал эту фразу и не удлинял правило, значимость этого правила не прибавится.
И напротив, если заключить текст в три блока, двум внешним задать id и класс соответственно, в CSS прописать правило, то оно легко перебивается селектором из трёх тегов (потому что внутренний тег ближе к значению).
Я предположил что ошибка допущена в подсчёте - и он ведётся в двоичной системе счисления, а не десятичной (как написано в карточке), но и это утверждение не выдерживает практики.
Суммирование приоритетов, как по мне, не совсем корректное утверждение. А вот если один и тот же блок или последовательность блоков равноудалены от значения, и прописать в разных правилах через теги, классы, id - то блок, прописанный в CSS через id имеет выше приоритет перед правилом, описывающим этот же блок, но через класс либо тег.
Вы пользуетесь песочницей для своего эксперимента, а значит можете добавить ссылку на свой код.
По поводу первого скрина, нельзя вкладывать строчные элементы в блочные. То есть в span нельзя оборачивать div. Также хотелось бы обратить ваше внимание, что последний span не закрыт (на втором скрине тоже).
Форматируйте свой код правильно (с переносами и отступами), чтобы можно было проследить вложенность.
Спасибо за указанные огрехи. Недосмотрел. И за особенности пользования div и span
Извиняюсь, здесь не закралась ошибка? Мне казалось div - блочный, span - строчный
Я поправил код на втором скрине, вместо вложенного div, поставил em. Результат тот же. Т.е. селекторы по имени оказываются более приоритетными перед id и классом.
Если я правильно всё сделал, то вот ссылка на код: https://jsbin.com/zalorec/edit?html,css,output
По поводу второго скрина, селекторы получаются не равнозначны. По вашей логике у em тоже должен быть класс.
На первом скрине конечно очень интересное получилось наблюдение, но не зацикливайтесь на этом.
В работе с проектом максимальная приемлемая вложенность - это три селектора. Если больше - это считается плохой практикой.
1. Первостепенный приоритет имеет тег, расположенный ближе к значению.
Во втором скрине есть и id, и класс, но приоритет у em выше, потому что он описывает третий уровень вложенности, в то время как .one - описывает второй уровень.
2. Если оба правила описывают на одинаковых уровнях вложенности, то id, класс, тег - порядок приоритета
Т.е. если в первом правиле убрать em, то приоритет перейдёт ко второму правилу т.к. у него селектор - класс, а не имя тега.
3. Приоритетность не суммируется и селекторы не имеют коэффициента важности
