# CSS. Вес селектора Все CSS-селекторы имеют свой **вес**, который определяет **как взаимодействуют одинаковые свойства, заданные в разных местах кода _одному и тому же элементу_**. Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес). Пример: ```

``` ```css #container A { background: orange; } .list A { background: mediumspringgreen; } ``` Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но это не так. ## Принцип расчета Специфичность селектора рассчитывается по 4-м позициям: | 0 | 0 | 0 | 0 | |:--:|:-------:|:-------:|:-------:| |style=""|#id|.class|| Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию. Пример: ```murkup #container ``` | 0 | 1 | 0 | 1 | |:--:|:-------:|:-------:|:-------:| |style=""|#id|.class|| ```murkup .container

``` | 0 | 0 | 1 | 2 | |:--:|:-------:|:-------:|:-------:| |style=""|#id|.class|| ## Вес селекторов (по убыванию): | * | * | |:--:|:-------:| |style=""|1,0,0,0| |#id|0,1,0,0| |.class|0,0,1,0| |[attr=value]|0,0,1,0| |

|0,0,0,1| |*|0,0,0,0| У стилей, заданных в атрибуте style, на первой позиции будет единица — 1,0,0,0. Это самая высокая специфичность, которая перевешивает свойства, заданные другими способами. Переопределить стили, заданные в style, можно дописав **!important** к значению свойства в таблице стилей. Обратный вариант — универсальный селектор *, он не имеет веса: 0,0,0,0. **Примеры:** `

` - 0,0,0,1 — селектор по тегу `
- ` - 0,0,0,2 — селектор c двумя тегами весит больше, чем с одним. `.orange` - 0,0,1,0 — селектор с классом весит больше, чем селектор с тегом. `.orange ` - 0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега. `#page .orange` - 0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей. ## Итог Теперь сравним селекторы из исходного примера: `#container A` - 0,1,0,1 `.list A` - 0,0,1,1 0,1,0,1 > 0,0,1,1 — хорошо видно, что селектор с ID весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.