Проблема приоритета на самом деле является проблемой разрешения конфликтов. Когда один и тот же элемент (или контент) выбирается селектором CSS, в соответствии с приоритетом необходимо выбирать разные правила CSS. На самом деле возникает много проблем.
Первое — это специфика правил CSS. CSS2.1 имеет набор методов расчета специфичности, которая представлена четырехзначной числовой строкой (CSS2 — трехзначная). В конце концов, чем выше специфичность, тем больше. особое правило. В приоритете будет более выгодно при вынесении суждений. Что касается конкретного расчета специфичности, то существуют следующие общие правила сложения чисел в различных ситуациях:
для каждого селектора идентификатора (#someid) прибавляйте 0,1,0,0.
Каждый селектор класса (.someclass), каждый селектор атрибута (сформированный как [attr=""] и т. д.), каждый псевдокласс (сформированный как: hover и т. д.) добавляют 0, 0, 1, 0
к каждому элементу или Псевдоэлементы (:firstchild) и т. д., добавьте 0,0,0,1
. Другие селекторы включают глобальный селектор *, добавьте 0,0,0,0. Это равносильно тому, чтобы его не добавлять, но это тоже некая специфика, о которой будет сказано позже.
Согласно этим правилам, числовые строки добавляются побитно, чтобы получить окончательную расчетную специфичность, а затем побитно сравниваются в порядке слева направо при сравнении и выборе.
Приведем несколько примеров:
h1 {цвет: красный;}
/* Бонус обычного элемента только один, результат 0,0,0,1 */
тело h1 {цвет: зеленый;}
/* Добавляем два обычных элемента, результат 0,0,0,2 */
--Последний выигрывает
h2.grape {color: Purple;}
/* Добавляется обычный элемент и селектор класса, результат — 0,0,1,1*/
h2 {цвет: серебро;}
/*Обычный элемент, результат 0,0,0,1 */
--Первый выигрывает
html > body table tr[id="totals"] td ul > li {color: бордовый;}
/* 7 обычных элементов, один селектор атрибутов, два других селектора, результат 0,0,1,7 */
li#answer {цвет: темно-синий;}
/* Селектор ID, обычный селектор, результат 0,1,0,1 */
--Последний побеждает
Помимо специфичности,
в тексте правила есть и другие стили стилей, имеющие приоритет 1,0,0,0, поэтому они всегда выше внешних определений. Здесь внутритекстовые стили относятся к стилям, которые выглядят как