Специфика CSS - это про то, какие стили применяются к элементам: чем конкретнее селектор CSS, тем больше веса он имеет при определении стиля элемента.
Возьмем следующий HTML и CSS в качестве примера:
<article id="css-rocks">
...
</article>
<style>
#css-rocks {
background-color: white;
}
article {
background-color: black;
}
</style>
Побеждает белый цвет, так как селектор id более специфичен и имеет больший вес.
Существует пять основных уровней, которые определяют специфику стиля, от наименее специфического к наиболее специфичному:
1. Элемент
article {
background-color: black;
}
2. Класс
.css-class {
background-color: black;
}
3. ID
#css-id {
background-color: black;
}
4. Inline стили
<article style="background-color: black;"> ... </article>
5. !important
article {
background-color: black !important;
}
Можно использовать комбинацию этих атрибутов.
Тут вступает в действие система весов.
Поскольку пять различных факторов влияют на специфичность CSS, мы используем пять чисел, чтобы отслеживать, сколько раз мы видим тип селектора. Мы начинаем вес с нулевой специфичностью, которая представлена как (0, 0, 0, 0, 0). Это: !important, Inline, ID, Класс, Элемент. При наличии уровня выставляется единица.
Пример:
<article id="css-rocks">
<section class="css-history">
...
</section>
</article>
<style>
#css-rocks section {
background-color: black;
}
article#css-rocks section.css-history {
background-color: white;
}
</style>
#css-rocks section будет весить 0, 0, 1, 0, 1
article#css-rocks section.css-history рассчитать немного сложнее.
Для этого воспользуемся таблицей
Селектор: | Тип: | Вес:
article | Element | (0, 0, 0, 0, 1)
#css-rocks | Id | (0, 0, 1, 0, 1)
section | Element | (0, 0, 1, 0, 2)
.css-history | Class | (0, 0, 1, 1, 2)
Получаем финальный вес 0, 0, 1, 1, 2
Сравним два смешанных селектора:
#css-rocks section: 0, 0, 1, 0, 1
article#css-rocks section.css-history: 0, 0, 1, 1, 2
Второй имеет больший вес, значит победит белый фон.
Что произойдет, если два стиля имеют одинаковую специфику ?
Тот, который объявлен позже, побеждает.
article {
background-color: black;
}
article {
background-color: white;
}
Побеждает белый фон.
Атрибут !important применяется не ко всем стилям в селекторе, а только к тому стилю, к которому приставлен.
article .css-history {
background-color: black !important; /* (1, 0, 0, 1, 1) */
color: white; /* (0, 0, 0, 1, 1) */
}
Полезные советы:
- При попытке переопределить стиль, проверьте, не мешают ли этому излишние id.
- Используйте вспомогательные классы. Например, если элементу .card необходимо задавать разные цвета фона, добавьте дополнительные классы, соответствующие цвету фона.
- В каких случаях использовать !important. Желательно, только в экстренных. Например, когда срочно надо поправить стиль перед презентацией. Использовать как временную меру.
Вредные советы:
1. Используйте несколько идентификаторов в одном селекторе. Это запутает всех, кто будет читать ваш код, в том числе и вас.
#css-rocks#css-rocks {
background-color: black; /* (0, 0, 2, 0, 0) */
}
#css-rocks {
background-color: white; /* (0, 0, 1, 0, 0) */
}
2. Если этого недостаточно для крупного пакостника, то попробуйте вот что:
<article style="background-color: banana !important;">
...
</article>
Теперь ваш стиль невозможно переопределить через CSS файл.
Данная статья подготовлена по источнику:
