Правила специфичности в CSS
В предыдущем примере оба селектора были одинаковыми и имели одинаковый приоритет. Это значит, что побеждало то свойство, которое было написано ниже.
Бывают также ситуации, когда одному элементу страницы соответствуют несколько селекторов. В этом случае при конфликте свойств победит более специфичный, то есть более точный селектор. Давайте рассмотрим правила специфичности.
Правило первое
Класс всегда побеждает селектор тега:
<p class="text">text</p>
p {
color: red;
}
.text {
color: green; /* применится этот цвет */
}
:
Правило второе
Идентификатор всегда побеждает класс:
<p id="elem" class="text">text</p>
.text {
color: red;
}
#elem {
color: green; /* применится этот цвет */
}
:
Правило третье
При равных условиях побеждает тот селектор, у которого больше частей. Например, если у нас два селектора тегов, то победит тот, у которого тегов больше:
<div>
<p>text</p>
</div>
p {
color: red;
}
div p {
color: green; /* применится этот цвет */
}
:
Если два селектора классов, то победит тот, в котором указано больше классов (если там будут селекторы тегов, то они не влияют):
<div class="block">
<p class="text">text</p>
</div>
.text {
color: red;
}
.block .text {
color: green; /* применится этот цвет */
}
: