[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-chto-takoe-spetsifichnost-specificity-selektorov":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":19,"progress":20,"seo":21},1030,"chto-takoe-spetsifichnost-specificity-selektorov",32,"osnovy-css","Основы CSS","🎨","Что такое специфичность (specificity) селекторов?","Специфичность — это механизм, определяющий приоритет CSS-правил при конфликте нескольких правил, применённых к одному элементу. Чем выше специфичность селектора, тем выше приоритет его стилей.\n\n> Аналогия из жизни: специфичность — как военные звания. Приказ генерала (id) перевешивает приказ полковника (class), а тот — приказ рядового (тег). Если звания равны, выполняется последний по времени приказ.\n\n### Расчёт специфичности\n\nСпецифичность записывается как четыре числа (a, b, c, d):\n\n| Уровень | Что считаем | Пример | Вес |\n|---------|-------------|--------|-----|\n| a | Inline-стили (`style=\"\"`) | `style=\"color:red\"` | 1,0,0,0 |\n| b | Идентификаторы (`#id`) | `#header` | 0,1,0,0 |\n| c | Классы, псевдоклассы, атрибуты | `.nav`, `:hover`, `[type]` | 0,0,1,0 |\n| d | Элементы, псевдоэлементы | `div`, `::before` | 0,0,0,1 |\n\n### Примеры\n\n| Селектор | Специфичность | Итог |\n|----------|--------------|------|\n| `p` | 0,0,0,1 | 1 |\n| `.intro` | 0,0,1,0 | 10 |\n| `p.intro` | 0,0,1,1 | 11 |\n| `#main` | 0,1,0,0 | 100 |\n| `#main .intro p` | 0,1,1,1 | 111 |\n| `style=\"...\"` | 1,0,0,0 | 1000 |\n\n### Правила разрешения конфликтов\n\n1. Сравнивается специфичность — побеждает более специфичный селектор\n2. При равной специфичности — побеждает последнее правило в коде\n3. `!important` перебивает любую специфичность (но использовать его — плохая практика)\n\n> **На собеседовании:** интервьюер часто даёт два конфликтующих правила и просит определить, какое сработает. Нужно уметь рассчитать специфичность. Частая ошибка — забыть, что при равной специфичности побеждает последнее правило.","","middle",[15,16,17,18],"каскадность","css","специфичность","селекторы",[],null,{"title":22,"description":23,"ogTitle":24,"ogDescription":25,"keywords":26,"schemaAnswer":34,"featuredSnippetReady":35},"Что такое специфичность (specificity) селекторов — Gymterview","Специфичность CSS-селекторов: расчёт (a,b,c,d), inline > id > class > element. Правила разрешения конфликтов, !important, примеры вычисления.","Специфичность CSS-селекторов: расчёт и правила — Gymterview","Как рассчитать специфичность CSS: inline, id, class, element. Примеры, разрешение конфликтов, !important.",[27,28,29,30,31,15,32,33],"специфичность CSS","specificity","приоритет CSS","расчёт специфичности","!important","inline стили","собеседование","Специфичность — механизм определения приоритета CSS-правил при конфликте. Записывается как (a,b,c,d): a — inline-стили (1,0,0,0), b — id (0,1,0,0), c — классы\u002Fпсевдоклассы\u002Fатрибуты (0,0,1,0), d — элементы\u002Fпсевдоэлементы (0,0,0,1). При равной специфичности побеждает последнее правило. !important перебивает любую специфичность, но считается плохой практикой.",true]