Подробное объяснение произношения приоритета CSS. Приоритет CSS включает четыре уровня (селектор в тексте, селектор идентификатора, селектор класса, селектор элемента) и количество вхождений каждого уровня. Приоритет CSS рассчитывается на основе количества вхождений этих четырех уровней.
Приоритетное чтение следует разделить на «группы». Группы независимы друг от друга и сравниваются слева направо. Они появляются группами, разделенными запятыми.
селектор( a , b , c , d )
сравнить: ↑ , ↑ , ↑ , ↑
селектор( a , b , c , d )
Как показано в исходном тексте на сайте w3c.org, он разделен на четыре группы a, b, c и d, каждая из которых является положительным целым числом. Значение по умолчанию — 0, что соответствует различным структурам селекторов и формам композиции. При сравнении приоритетов между селекторами сравнивайте один к одному слева направо. Когда сравнение больше, сравнение можно остановить.
li.red.level {} /* a=0 b=0 c=2 d=1 -> специфичность = 0 , 0 , 2 , 1 */
/*сравнить ↑, ↑, √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> специфичность = 0 , 0 , 1 , 1 */
/*сравнить ↑, ↑, ↑, √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> специфичность = 0 , 0 , 1 , 3 */
/*сравнить ↑, ↑, √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> специфичность = 0 , 1 , 0 , 0 */
/*сравнить ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> специфичность = 1 , 0 , 0 , 0 */
(В приведенной выше таблице ↑ означает, что сравнение все еще необходимо, а √ означает, что результаты были получены отсюда)
Более того, пока он написан правильно, структуру селектора можно примерно узнать только по приоритету, например:
1,0,0,0 указывает стиль внутри элемента;
0,2,1,1 представляет селектор, состоящий из двух селекторов идентификаторов, селектора класса, псевдокласса или атрибута и селектора элемента.
Подробности правил приоритета CSS:
После исправления произношения можно перейти к детальным правилам:
Значение группы a будет только 1, когда CSS записан в атрибут style, в противном случае оно будет равно 0. Оператор стиля, записанный в style, на самом деле не является селектором, поэтому значения группы b, c и d здесь все равны 0 и только фактические. Только селектор будет иметь значения группы b, c, d.
Значение группы b определяется селектором идентификатора #ID, количеством селекторов идентификатора, и значение группы будет накапливаться;
Группа значений c определяется классом, псевдоклассом и селектором атрибутов, и группа значений будет накапливаться;
Группа значений d определяется именем элемента, то есть селектором элемента, и группа значений будет накапливаться;
Обратите внимание, что эти четыре набора значений соответствуют разным типам селекторов и не влияют друг на друга. Они сравниваются по правилам чтения.
!важно, здесь не обсуждаются принцип близости и наследование, и нет примера кода. Все могут прийти на webjx.com для обсуждения!
Вот несколько примеров: Проблемы приоритета CSS Приоритет CSS включает четыре уровня (селектор текста, селектор идентификатора, селектор класса, селектор элемента) и количество вхождений каждого уровня. Приоритет CSS рассчитывается на основе количества вхождений этих четырех уровней.
Правила расчета приоритета CSS следующие:
* К стилю, определенному на странице, добавьте 1,0,0,0.
* Для каждого селектора идентификатора (например, #id) добавьте 0,1,0,0.
* Добавьте 0,0,1,0 к каждому селектору класса (например, .class), каждому селектору атрибута (например, [attribute=]) и каждому псевдоклассу (например, hover).
* Для каждого селектора элемента (например, p) или селектора псевдоэлемента (например, firstchild) добавьте 0,0,0,1.
Затем сложите эти четыре числа по отдельности, чтобы получить значение каждого приоритета, определенного CSS.
Затем побитно сравните размер слева направо. Стиль CSS с большим числом будет иметь более высокий приоритет.