Это старая версия документа!
# CSS. Вес селектора
Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).
Пример: ```html <div id=«container»>
<p><a href="#">link in P</a></p>
<ul class="list"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul>
</div> ```
```css #container A {
background: orange;
}
.list A {
background: mediumspringgreen;
} ```
Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но это не так.
## Принцип расчета
Специфичность селектора рассчитывается по 4-м позициям:
| 0 | 0 | 0 | 0 |
|---|---|---|---|
| style=«« | #id | .class | <tag> |
Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.
Пример:
```murkup #container <a> ```
| 0 | 1 | 0 | 1 |
|---|---|---|---|
| style=»« | #id | .class | <tag> |
```murkup .container <ul> <a> ```
| 0 | 0 | 1 | 2 |
|---|---|---|---|
| style=»« | #id | .class | <tag> |
Вес селекторов (по убыванию):
| * | * |
|---|---|
| style=»« | 1,0,0,0 |
| #id | 0,1,0,0 |
| .class | 0,0,1,0 |
| [attr=value] | 0,0,1,0 |
| <li> | 0,0,0,1 |
| * | 0,0,0,0 |
У стилей, заданных в атрибуте style, на первой позиции будет единица — 1,0,0,0. Это самая высокая специфичность, которая перевешивает свойства, заданные другими способами.
Переопределить стили, заданные в style, можно дописав !important к значению свойства в таблице стилей.
Обратный вариант — универсальный селектор *, он не имеет веса: 0,0,0,0.
Примеры:
`<li>` - 0,0,0,1 — селектор по тегу
`<ul> <li>` - 0,0,0,2 — селектор c двумя тегами весит больше, чем с одним.
`.orange` - 0,0,1,0 — селектор с классом весит больше, чем селектор с тегом.
`.orange <a> <span>` - 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 весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.