Различия

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

--- css:selector_weight [2022/09/19 23:13] – so_v_a
+++ css:selector_weight [2026/08/06 09:19] (текущий) – so_v_a
@@ Строка 1: / Строка 1: @@
+<!DOCTYPE markdown>
 # CSS. Вес селектора
-Все CSS-селекторы имеют свой **вес**, который определяет **как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу**.
+Все CSS-селекторы имеют свой **вес**, который определяет **как взаимодействуют одинаковые свойства, заданные в разных местах кода _одному и тому же элементу_**.
 Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).
 Пример:
-```html
+```
 <div id="container">
   <p><a href="#">link in P</a></p>
@@ Строка 28: / Строка 30: @@
 Казалось бы, ссылки в тексте должны получить оранжевый фон, а ссылки в списке — зеленый, но это не так.
 ## Принцип расчета
 Специфичность селектора рассчитывается по 4-м позициям:
-^0^0^0^0^
+| 0 | 0 | 0 | 0 |
+|:--:|:-------:|:-------:|:-------:|
 |style=""|#id|.class|<tag>|
@@ Строка 43: / Строка 45: @@
 #container <a>
 ```
+| 0 | 1 | 0 | 1 |
-^0^1^0^1^
+|:--:|:-------:|:-------:|:-------:|
 |style=""|#id|.class|<tag>|
@@ Строка 51: / Строка 53: @@
 ```
-^0^0^1^2^
+| 0 | 0 | 1 | 2 |
+|:--:|:-------:|:-------:|:-------:|
 |style=""|#id|.class|<tag>|
-Вес селекторов (по убыванию):
+## Вес селекторов (по убыванию):
-*	*
-style=""	1,0,0,0
+| * | * |
-#id	0,1,0,0
+|:--:|:-------:|
-.class	0,0,1,0
+|style=""|1,0,0,0|
-[attr=value]	0,0,1,0
+|#id|0,1,0,0|
-LI	0,0,0,1
+|.class|0,0,1,0|
-*	0,0,0,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