CSS

Объявления и специфичность

Как только специфичность селектора вычислена, ее значение передается всем ассоциированным с селектором объявлениям. Рассмотрим следующее правило:

h1 {color: silver; background: black;}


Чтобы определить специфичность, агент пользователя должен рассматривать правило так, как будто бы оно разделено на отдельные «разгруппированные». правила. Таким образом, предыдущий пример принимает вид:

h1 {color: silver;}
h1 {background: black;}

Оба правила имеют специфичность 0,0,0,1, и именно это значение присваивается каждому объявлению. Аналогичный процесс разделения имеет место и с группированными селекторами. Данное правило:

h1, h2.section {color: silver; background: black;}

агент пользователя интерпретирует следующим образом:
h1 {color: silver;} /* 0,0,0,1 */
h1 {background: black;} /* 0,0,0,1 */
h2.section {color: silver;} /* 0,0,1,1 */
h2.section {background: black;} /* 0,0,1,1 */


Это важно в ситуациях, когда одному элементу сопоставляются несколько правил и возникает конфликт нескольких объявлений. Рассмотрим правило:

h1 + p {color: black; font-style: italic;} /* 0,0,0,2 */
p {color: gray; background: white; font-style: normal;} /* 0,0,0,1 */
*.aside {color: black; background: silver;} /* 0,0,1,0 */


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

<h1>Greetings!</h1>
<p class="aside">
It's a fine way to start a day, don't you think?
</p>
<p>
There are many ways to greet a person, but the words are not as important as
the act of greeting itself.
</p>
<h1>Salutations!</h1>
<p>
There is nothing finer than a hearty welcome from one's fellow man.
</p>
<p class="aside">
Although a thick and juicy hamburger with bacon and mushrooms runs
a close second.
</p>


В любом случае агент пользователя находит, какие правила сопоставляются элементу, вычисляет все ассоциированные объявления и их специфичности, устанавливает победителей и затем применяет их к элементу для получения результата, оформленного в соответствии с указанными стилями. Такие действия должны быть осуществлены для каждого элемента, селектора и объявления. К счастью, агент пользователя делает все автоматически. Это поведение представляет собою важный компонент каскада, рассматриваемый далее в данной главе.
Теги:
специфичность
Добавлено: 17 Июля 2018 21:03:59 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...