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

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

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 */

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

Greetings!


It's a fine way to start a day, don't you think?



There are many ways to greet a person, but the words are not as important as
the act of greeting itself.


Salutations!



There is nothing finer than a hearty welcome from one's fellow man.


Although a thick and juicy hamburger with bacon and mushrooms runs
a close second.



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


Такие действия должны быть осуществлены для каждого элемента, селектора и объявления. К счастью, агент пользователя делает все автоматически. Это поведение представляет собою важный компонент каскада, рассматриваемый далее в данной главе.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Важность
Каскад
Наследование
Сортировка по порядку расположения
Сортировка по приоритетности и источнику

Вернуться в раздел: CSS / 3. Структура и каскад