SovaWiki

Это старая версия документа!

---

# 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-м позициям:

Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.

Пример:

```murkup #container <a> ```

```murkup .container <ul> <a> ```

Вес селекторов (по убыванию): * * 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 весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.

#css