DevGang
Авторизоваться

Вес селекторов в 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

* * *

Файлы с урока

Мой youtube

Мой telegram канал

Источники:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Vladimir Shaitan - Видео блог о frontend разработке и не только

Посмотреть