Интерпретируйте приоритет CSS для вас

Прежде чем говорить о приоритете CSS, нам нужно понять, что такое CSS и для чего он используется.

Во-первых, давайте кратко объясним CSS: CSS — это аббревиатура каскадных таблиц стилей. Его характеристики представляют собой уникальный этап развития в истории Интернета. В настоящее время среди друзей, занимающихся созданием веб-страниц, должно быть мало тех, кто не слышал о CSS, поскольку нам часто приходится использовать его в процессе создания веб-страниц.

Во-вторых: мы можем задать богатый и простой в изменении внешний вид документа с помощью CSS, чтобы уменьшить рабочую нагрузку производителей веб-страниц и тем самым снизить затраты на производство и последующее обслуживание.

На самом деле совершенно излишне говорить о том, что такое CSS и каковы его функции. Я полагаю, что друзья, занимающиеся созданием веб-страниц, уже более или менее сталкивались с ним.

Ближе к дому, давайте перейдем к сегодняшней теме:

1. Что является приоритетом CSS?

Так называемый приоритет CSS относится к порядку, в котором стили CSS анализируются в браузере.

2. Правила приоритета CSS

Поскольку стили имеют приоритет, будет правило, согласовывающее этот приоритет, и этому «правилу» посвящена данная статья.

Специфика таблицы стилей описывает относительную значимость различных правил. Ее основные правила таковы:

1. Подсчитайте количество атрибутов ID в селекторе.
2. Подсчитайте количество атрибутов CLASS в селекторе.
3. Подсчитайте количество имен тегов HTML в селекторе.

Наконец, напишите три числа в правильном порядке, без добавления пробелов и запятых, чтобы получить трехзначное число (css2.1 использует 4 цифры). (Обратите внимание, что вам нужно преобразовать число в большее число, заканчивающееся тремя цифрами). Окончательный список чисел, соответствующих селектору, позволяет легко определить, какие функции большего числа переопределяют функции меньшего числа.

Например:

1. Для каждого селектора идентификатора (#someid) добавьте 0,1,0,0.
2. Добавьте 0,0,1,0 к каждому селектору класса (.someclass), каждому селектору атрибута (форма типа [attr=value] и т. д.) и каждому псевдоклассу (форма: наведение и т. д.).
3. Для каждого элемента или псевдоэлемента (:firstchild) и т. д. добавьте 0,0,0,1.
4. Другие селекторы включают глобальный селектор * плюс 0,0,0,0. Это равносильно тому, чтобы его не добавлять, но это тоже некая специфика, о которой будет сказано позже.

3. Список выбора для классификации объектов

Вот список селекторов, отсортированных по атрибуту:

Судя по приведенной выше таблице, это кажется трудным для понимания. Вот еще одна таблица:

Из вышесказанного легко увидеть, что вес тега HTML равен 1, вес CLASS — 10, вес ID — 100, а унаследованный вес — 0 (будет обсуждаться позже).

Складывайте строки чисел побитно в соответствии с этими правилами, чтобы получить окончательный вес, а затем сравнивайте их побитно слева направо при сравнении и выборе.

Проблема приоритета на самом деле является проблемой разрешения конфликтов. Когда один и тот же элемент (контент) выбирается селектором CSS, в соответствии с приоритетом необходимо выбирать разные правила CSS. На самом деле возникает много проблем.

Сказав это, нам нужно поговорить о наследовании CSS.