Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:
Считается число идентификаторов в селекторе (группа a)
Считается число селекторов классов, атрибутов и псевдо-классов в селекторе (группа b)
Считается число селекторов типа и псевдо-элементов в селекторе (группа c)
Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора
Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора
В примере ниже селекторы расположены в порядке увеличения их специфичности:
* /* a=0 b=0 c=0 -> специфичность = 0 */
li /* a=0 b=0 c=1 -> специфичность = 1 */
ul li /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li /* a=0 b=0 c=3 -> специфичность = 3 */
h1 + *[rel=up] /* a=0 b=1 c=1 -> специфичность = 11 */
ul ol li.red /* a=0 b=1 c=3 -> специфичность = 13 */
li.red.level /* a=0 b=2 c=1 -> специфичность = 21 */
#x34y /* a=1 b=0 c=0 -> специфичность = 100 */
#s12:not(p) /* a=1 b=0 c=1 -> специфичность = 101 */
Самый высокий приоритет имеет число из группы «a», число группы «b» имеет средний приоритет, число из группы «c» имеет наименьший приоритет. Числа из разных групп не суммируются в одно общее, т.е. возьмём из примера последнюю строку со специфичностью селектора «101» - это не означает число «сто один», это значит, что был использован один селектор из группы «a» (идентификатор) и один селектор из группы «c» (селектор типа).
Присоединяйтесь — мы покажем вам много интересного
Присоединяйтесь к ОК, чтобы подписаться на группу и комментировать публикации.
Нет комментариев