Глубокое понимание приоритета селектора CSS

внешний интерфейс алгоритм контейнер CSS

Что такое приоритет селектора (специфичность)

напрямую скопированоОпределение приоритета MDN:

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

Это предложение также очень абстрактно, давайте пока его проигнорируем. Но сначала рассмотрим пример:

  • HTML:
<div id="content" class="content">
我是什么颜色
</div>
  • CSS:
#content {
    color: #f00;
}
.content {
     color: #0f0;
}

Какого цвета последний текст? Ответ прост: красный. Это связано с вопросом приоритета: мы используем один и тот же контент в одно и то же время.ID选择器и类选择器,так какID选择器приоритет больше, чем类选择器, поэтому он заканчивается красным цветом.

Правила расчета приоритета

Я считаю, что каждый друг, который писал CSS, знает, что приоритетное отношение селекторов CSS:

Встроенный > Селектор ID > Селектор класса > Селектор метки.

Однако каков конкретный алгоритм приоритета браузера? Может быть, некоторые люди не знают. Процесс алгоритма упоминается в «РЕФАКТОРИНГ CSS».

A specificity is determined by plugging numbers into (a, b, c, d):

  1. If the styles are applied via the style attribute, a=1; otherwise, a=0.
  2. b is equal to the number of ID selectors present.
  3. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
  4. d is equal to the number of type selectors and pseudoelements present.

переведи это на

приоритет отдаетсяA,B,C,Dопределяются значением , где правила расчета их значений следующие:

  1. Если встроенные стили существуют, тоA = 1, в противном случаеA = 0;
  2. Bзначение, равноеID选择器количество случаев;
  3. Cзначение, равное类选择器и属性选择器и伪类общее количество событий;
  4. Dзначение, равное标签选择器и伪元素Общее количество вхождений .

Кажется, что все еще очень ясно, если посмотреть на это напрямую.Давайте сначала возьмем пример:

#nav-global > ul > li > a.nav-link

Примените приведенный выше алгоритм, чтобы получитьA B C DЗначение:

  1. Поскольку нет встроенных стилей, поэтомуA = 0;
  2. Селектор ID появляется всего 1 раз,B = 1;
  3. Селектор класса появляется 1 раз, селектор атрибута появляется 0 раз, а селектор псевдокласса появляется 0 раз, поэтомуC = (1 + 0 + 0) = 1;
  4. Селектор тегов появляется 3 раза, а псевдоэлемент появляется 0 раз, поэтомуD = (3 + 0) = 3;

рассчитано вышеA,B,C,DМожно сократить как:(0, 1, 1, 3).

Чтобы познакомиться с освоением алгоритма приоритета, давайте проделаем еще несколько упражнений:

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

Хорошо, теперь понятно, как считается приоритет. Однако остается проблема, как сопоставить уровень двух приоритетов?Правило сравнения: сравнивайте слева направо, выигрывает больший, и если они равны, продолжайте двигаться на один бит вправо для сравнения. Если все 4 бита равны, то последний перезапишет первый.

Давайте снова посмотрим на пример:

  • html:
<div class="nav-list" id="nav-list">
	<div class="item">nav1</div>
	<div class="item">nav2</div>
</div>
  • CSS:
#nav-list .item {
	color: #f00;
}

.nav-list .item {
	color: #0f0;
}

понимать#nav-list .itemприоритет(0, 1, 1, 0), .nav-list .itemприоритет(0, 0, 2, 0). Первый бит слева равен 0, а затем посмотрите на второй бит слева, первый бит равен 1, последний равен 0, поэтому（0, 1, 1, 0）больше, чем(0, 0, 2, 0),Сейчас#nva-list .itemбольше, чем.nav-list .item, поэтому шрифт будет красным.

особый случай приоритета

После приведенных выше правил расчета приоритета мы можем знать, что приоритет встроенных стилей является самым высоким, но есть ли способ для внешних стилей переопределить встроенные стили? да, тогда!importantвне. Поскольку обычно встроенные стили используются редко, поэтому!importantРедко используемый! Если это не переопределение встроенных стилей, рекомендуется не использовать!important. ,

Некоторые люди могут подумать, что если я использую встроенные стили!important, а с внешними стилями никак нельзя сделать? Например следующий код:

  • HTML:
<div class="app" style="color:#f00!important">666</div>
  • CSS:
.app {
	color: 0f0!important;
}

Да, вы выиграли, на данный момент встроенные стили настолько сильны, что независимо от того, как вы пишете внешние стили, вы не можете их переопределить. Этой ситуации следует избегать в реальном коде! Помните, никогда не используйте во встроенных стилях!important

Наконец ,!importantНеужели это непревзойденный король? На самом деле нет, в некоторых случаях мы можем выйти за рамки!important, см. следующий пример:

  • html:
<div class="box" style="background: #f00; width: 300px!important;">我的宽度是多少呢？？<div>
  • css:
.box {
	max-width: 100px;
}

В этот момент.boxширина только100px, вместо300px, видимый,max-widthможет выйти за рамкиwidth!important!Однако на самом деле это не вопрос приоритета, так как приоритет сравнивает одни и те же свойства, аmax-widthиwidthэто два разных свойства. Этот пример предназначен для того, чтобы сообщить вам, что иногда независимо от того, как установлен контейнерwidthНе работает, проверьте, написал ли ктоmax-widthЯма вас.

Хорошо, сначала здесь написано приоритет, друзья, если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение для обсуждения~

Категории