Недавно я увидел блог с более подробным объяснением приоритета CSS. Хотя в Интернете есть соответствующие статьи, я все же разместил их для вашего удобства.
Подробное объяснение произношения приоритета CSS. Приоритет CSS включает четыре уровня (селектор в тексте, селектор идентификатора, селектор класса, селектор элемента) и количество вхождений каждого уровня. Приоритет CSS рассчитывается на основе количества вхождений этих четырех уровней.
Ниже приводится цитата: [Перепечатано из блога GOVO]
Приоритетное чтение следует разделить на «группы». Группы независимы друг от друга и сравниваются слева направо. Они появляются группами, разделенными запятыми.
Пример исходного кода
[www.downcodes.com] селектор( a , b , c , d )
сравнить: ↑ , ↑ , ↑ , ↑
selector( a , b , c , d ), как показано в исходном тексте на w3c.org, разделен на четыре группы a, b, c, d, все являются положительными целыми числами, а значение по умолчанию равно 0, что соответствует другому селектору. формируются структуры и композиции. При сравнении приоритетов между селекторами сравнивайте один к одному слева направо. Когда сравнение больше, сравнение можно остановить.
Пример исходного кода
[www.downcodes.com] 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 определяется именем элемента, то есть селектором элемента, и группа значений будет накапливаться;
Обратите внимание, что эти четыре набора значений соответствуют разным типам селекторов и не влияют друг на друга. Они сравниваются по правилам чтения.
!важно, здесь не обсуждаются принцип близости и наследование, а также нет примера кода. Все желающие могут прийти на W3Cbbs.com для обсуждения!
Вот пример: проблемы приоритета CSS
Приоритет CSS включает четыре уровня (селектор текста, селектор идентификатора, селектор класса, селектор элемента) и количество вхождений каждого уровня. Приоритет CSS рассчитывается на основе количества вхождений этих четырех уровней.
Правила расчета приоритета CSS следующие:
Пример исходного кода
[www.downcodes.com] * К стилю, определенному на странице, добавьте 1,0,0,0.
* Для каждого селектора идентификатора (например, #id) добавьте 0,1,0,0.
* Добавьте 0,0,1,0 к каждому селектору класса (например, .class), каждому селектору атрибута (например, [attribute=]) и каждому псевдоклассу (например, :hover).
* Для каждого селектора элемента (например, p) или селектора псевдоэлемента (например, :firstchild) и т. д. добавьте 0,0,0,1.
Затем сложите эти четыре числа по отдельности, чтобы получить значение каждого приоритета, определенного CSS.
Затем побитно сравните размер слева направо. Стиль CSS с большим числом будет иметь более высокий приоритет.
пример:
css или <style>, определенный следующим образом:
Пример исходного кода
[www.downcodes.com] 1. h1 {цвет: красный;}
/* Селектор элемента, результат: 0,0,0,1 */
2. тело h1 {цвет: зеленый;}
/* Два селектора элементов, результат 0,0,0,2 */
3. h2.grape {цвет: фиолетовый;}
/* Селектор элемента и селектор класса, результат: 0,0,1,1*/
4. li#answer {цвет: темно-синий;}
/* Селектор элемента, селектор идентификатора, результат: 0,1,0,1 */
Атрибут стиля элемента определяется следующим образом:
Пример исходного кода
[www.downcodes.com] h1 {цвет: синий;}
/* Определен на странице селектор элемента, результат: 1,0,0,1*/
Примечание. Здесь накладываются все числа: (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
С тех пор цвет элемента h1 — синий.
Уведомление:
1. Стиль, объявленный !important, имеет наивысший приоритет. В случае конфликта он будет рассчитан заново.
2. Если приоритеты одинаковы, выберите стиль, который появится последним.
3. Унаследованный стиль имеет самый низкий приоритет.
