2. Гайд по CSS-селекторам, расчёт специфичности в CSS. Приоритет и вес стилей
Специфика селекторов в CSS.
Специфика CSS - это про то, какие стили применяются к элементам: чем конкретнее селектор CSS, тем больше веса он имеет при определении стиля элемента. Возьмем следующий HTML и CSS в качестве примера: <article id="css-rocks">
...
</article> <style>
#css-rocks {
background-color: white;
}
article {
background-color: black;
}
</style> Побеждает белый цвет, так как селектор id более специфичен и имеет больший вес. Существует пять основных уровней, которые определяют специфику стиля, от наименее специфического к наиболее специфичному: 1...
Основы CSS - веса селекторов
Тут мы поговорим о том как определить какое на самом деле значение CSS свойства будет применено на элементе. Рассмотрим ситуации когда несколько селекторов определяют одно и тоже правило для одного и того же элемента Если у нас есть несколько способов сформулировать селектор на один и тот же элемент это значить что у нас возможны ситуации когда правила в одном селекторе противоречат правилам другого. Когда такое происходит браузеру необходимо принять решение о том как же отображать этот элемент...