Различия

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

--- css:selector_weight [2022/09/19 23:19] – 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|
@@ Строка 78: / Строка 83: @@
 `.orange <a> <span>` - 0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега.
 `#page .orange` - 0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.