Это старая версия документа!
CSS. Вес селектора Все 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-м позициям:
0 0 0 0 style=«» #id .class <tag> Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.
Пример:
#container <a> 0 1 0 1 style=«» #id .class <tag> .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 весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.
#css