Различия

Показаны различия между двумя версиями страницы.

--- css:selector_weight [2022/09/19 23:03] – создано so_v_a
+++ css:selector_weight [2026/08/06 09:19] (текущий) – so_v_a
@@ Строка 1: / Строка 1: @@
-CSS. Вес селектора
+<!DOCTYPE markdown>
-Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
-Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявленно выше, потому что селектор первого более специфичен (имеет больший вес).
+# CSS. Вес селектора
-Пример
+Все CSS-селекторы имеют свой **вес**, который определяет **как взаимодействуют одинаковые свойства, заданные в разных местах кода _одному и тому же элементу_**.
+Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).
+Пример:
+```
 <div id="container">
   <p><a href="#">link in P</a></p>
@@ Строка 14: / Строка 17: @@
   </ul>
 </div>
+```
+```css
 #container A {
   background: orange;
 }
 .list A {
   background: mediumspringgreen;
 }
+```
 Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но это не так.
+## Принцип расчета
-Принцип расчета
 Специфичность селектора рассчитывается по 4-м позициям:
-	0	0	0
+| 0 | 0 | 0 | 0 |
-style=""	#id	.class	<tag>
+|:--:|:-------:|:-------:|:-------:|
+|style=""|#id|.class|<tag>|
 Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.
 Пример:
+```murkup
 #container <a>
-	1	0	1
+```
-style=""	#id	.class	<tag>
+| 0 | 1 | 0 | 1 |
+|:--:|:-------:|:-------:|:-------:|
+|style=""|#id|.class|<tag>|
+```murkup
 .container <ul> <a>
-	0	1	2
+```
-style=""	#id	.class	<tag>
-Вес селекторов (по убыванию):
+| 0 | 0 | 1 | 2 |
-*	*
+|:--:|:-------:|:-------:|:-------:|
-style=""	1,0,0,0
+|style=""|#id|.class|<tag>|
-#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|
+|#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 к значению свойства в таблице стилей.
+Переопределить стили, заданные в style, можно дописав **!important** к значению свойства в таблице стилей.
 Обратный вариант — универсальный селектор *, он не имеет веса: 0,0,0,0.
-Примеры:
+**Примеры:**
+`<li>` - 0,0,0,1 — селектор по тегу
+`<ul> <li>` - 0,0,0,2 — селектор c двумя тегами весит больше, чем с одним.
-<li> - 0,0,0,1 — селектор по тегу
+`.orange` - 0,0,1,0 — селектор с классом весит больше, чем селектор с тегом.
-<ul> <li> - 0,0,0,2 — селектор c двумя тегами весит больше, чем с одним.
+`.orange <a> <span>` - 0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега.
-.orange - 0,0,1,0 — селектор с классом весит больше, чем селектор с тегом.
+`#page .orange` - 0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.
-.orange <a> <span> - 0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега.
-#page .orange - 0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.
+## Итог
-Итог
 Теперь сравним селекторы из исходного примера:
-#container A - 0,1,0,1
+`#container A` - 0,1,0,1
-.list A - 0,0,1,1
+`.list A` - 0,0,1,1
 ,1,0,1 > 0,0,1,1 — хорошо видно, что селектор с ID весит больше, чем селектор с классом, поэтому все ссылки имеют оранжевый фон, хотя ниже в коде им задан зеленый.
-#css