Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.

Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).

Пример:

<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>

#container A {
  background: orange;
}
 
.list A {
  background: mediumspringgreen;
}

Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но это не так.

Специфичность селектора рассчитывается по 4-м позициям:

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

Пример:

#container <a>

.container <ul> <a>

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