Приоритет css стилей
Здравствуйте дорогие друзья. Сегодня мы приступаем к новой теме, в которой будем рассматривать приоритет css стилей.
Вы неоднократно встречались с тем, что при использовании в вашей таблице стилей различных селекторов, браузер каким-то образом определял,
какой из стилей будет являться более важным, и устанавливал именно его свойства. При этом предыдущий стиль был игнорирован, и не применялся.
Все дело в том, что в специфике CSS, каждый селектор имеет свою степень важности. Начнем их рассматривать:
Селектор ID по своей значимости имеет 100 баллов.
Селектор class имеет 10 баллов.
Псевдокласс также имеет 10 баллов.
Селектор тегов получает всего лишь 1 балл.
И наконец, псевдоэлемент тоже имеет 1 балл.
Теперь, исходя из данного правила, предложу Вам рассчитать некоторую последовательность селекторов. Рассмотрим следующий пример:
#content .block .article a
Вспоминаем наше правило и начинаем подсчет. Мы имеем 1 селектор ID, 2 класса и 1 селектор тега. Результат: 100 + 10 + 10 + 1 = 121. В итоге мы получили 121 балл за написанный нами комбинированный селектор. Следовательно, если в Вашем коде будет написано следующее:
.block .article a
То приоритет будет отдан первому селектору, потому, что данный пример набирает всего лишь 21 балл.
Надеюсь, Вы уловили принцип, и сможете самостоятельно определять приоритет css стилей.
Еще следует запомнить, что если у Вас в css коде написано два одинаковый селектора, то приоритет будет отдаваться тому селектору,
который написан ниже. Например:
.article p span {
font-size: 20px;
}
.article p span {
font-size: 26px;
}
В данном случае для тега span будет применен размер шрифта равный 26 пикселей. То же самое следует учитывать при наличии
нескольких файлов стилей, которые Вы будете подключать на странице. Если в них будут присутствовать разногласия, то стили будут
применены из файла стилей, который подключен ниже.
Теперь, после изучения данной информации скорость вашей разработки должна немного вырасти, ведь Вы не будете тратить время на такие мелочи.
На этом все, до скорых встреч, пока.
