Вес селекторов в CSS
Привет, в этом уроке мы на примерах рассмотрим как работает вес и приоритетность селекторов. Текстовое описание урока в полной версии статьи.
Вес селектора - так как у нас в CSS есть огромное количество способов обращения к элементу по селектору, а селектор мы придумываем сами, внутри браузер разделяет их по весу, и отдает приоритет тем стилям вес селектора которых 'тяжелее'.
Селекторы по весу:
1. inline стили (те которые мы пишем внутри атрибута style для тега)
2. #id (селектор id)
3. .class (селектор class и любых других атрибутов кроме id)
4. <tagName> (название тега)
Так как мы можем комбинировать селекторы то и их вес тоже будет складываться.
Пример #1
Пытаемся изменить цвет текста у которого уже написаны inline стили
#p1 {
color: red;
}Как видим цвет этого элемента не изменился, так происходит потому что у селектора inline стилей селектор тяжелее чем у селектора id, а значит браузер отдаст приоритет селектору inline стилей, а стили которые связаны с id этого элемента будут проигнорированы.
Аналогично будет происходить если мы будем пробовать обратится по классу, тегу или каким-то другим образом.
.p1 {
color: red;
}
[title="p1"] {
color: red;
}
Как видим, ни одно из перечисленных css правил не сработало.
Пример #2
Работаем с элементов #p2 у которого нет inline стилей. Задам ему цвет через селектор id
#p2 {
color: deeppink;
}Пробуем изменить стили через селектор class
.p2 {
color: blueviolet;
}и другие селекторы
[title="p2"] {
color: blueviolet;
}
p {
color: blueviolet;
}Как видим цвет элемента не изменился, а остался таким как был задан в селекторе через id это происходит потому что id имеет больше вес чем остальные селекторы, а на текущем элементе нет никаких inline стилей которые могли бы изменять его цвет.
Пример #3
Что делать если наши селекторы одинаковые по весу?
Представим себе ситуацию, у нас есть элемент p3 у которого есть несколько классов и для каждого и этих классов написаны свои стили.
.p3-first {
color: red;
}
.p3-second {
color: green;
}Так как вес этих селекторов одинаковый то в приоритете будут те стили что написаны ниже в файле .css
