Frontend | Вопросы собесов on Telegram: “Что означает слово специфичность в css ? Спросят…”

Что означает слово специфичность в css ?
Спросят с вероятностью 7%

Специфичность (specificity) — это механизм, который браузеры используют для определения приоритета применяемых стилей. Специфичность определяет, какие правила CSS будут применены к элементу, когда существуют конфликтующие правила. Она рассчитывается на основе различных типов селекторов, используемых в правиле CSS.

Основные концепции

1️⃣Типы селекторов и их веса:
Специфичность определяется по типу селекторов, и каждый тип имеет свой вес. В порядке увеличения специфичности:

✅Элементы и псевдоэлементы (div, h1, p, ::before, ::after): вес 1.
✅Классы, атрибуты и псевдоклассы (.class, [type="text"], :hover, :nth-child): вес 10.
✅Идентификаторы (#id): вес 100.
✅Инлайновые стили (стили, заданные непосредственно в элементе с атрибутом style): вес 1000.
✅Важные правила (!important): не учитывают специфичность, а просто переопределяют другие правила.

2️⃣Правила вычисления специфичности:
Специфичность CSS выражается в виде чисел (a, b, c, d), где:
✅a — количество инлайновых стилей (1 или 0).
✅b — количество идентификаторов.
✅c — количество классов, атрибутов и псевдоклассов.
✅d — количество элементов и псевдоэлементов.

Примеры расчета специфичности

1️⃣Элементы и псевдоэлементы:

      div { color: red; } /* Специфичность: 0, 0, 0, 1 */
   p::before { content: ''; } /* Специфичность: 0, 0, 0, 2 */

2️⃣Классы, атрибуты и псевдоклассы:

      .example { color: blue; } /* Специфичность: 0, 0, 1, 0 */
   [type="text"] { color: green; } /* Специфичность: 0, 0, 1, 0 */
   :hover { color: yellow; } /* Специфичность: 0, 0, 1, 0 */

3️⃣Идентификаторы:

      #unique { color: orange; } /* Специфичность: 0, 1, 0, 0 */

4️⃣Инлайновые стили:

      <div style="color: purple;"></div> <!-- Специфичность: 1, 0, 0, 0 -->

5️⃣Комбинированные селекторы:

#unique .example:hover { color: pink; } /* Специфичность: 0, 1, 1, 1 */

Если два или более правил CSS применяются к одному и тому же элементу, приоритет будет у правила с наибольшей специфичностью.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Specificity Example</title>
  <style>
    p { color: red; } /* Специфичность: 0, 0, 0, 1 */
    .text { color: green; } /* Специфичность: 0, 0, 1, 0 */
    #unique { color: blue; } /* Специфичность: 0, 1, 0, 0 */
    .text#unique { color: orange; } /* Специфичность: 0, 1, 1, 0 */
  </style>
</head>
<body>
  <p class="text" id="unique">This is a paragraph.</p>
</body>
</html>

В этом примере, текст параграфа будет оранжевого цвета, так как правило .text#unique имеет наибольшую специфичность (0, 1, 1, 0).

Использование !important

Правила с ним имеют наивысший приоритет и могут переопределить даже те стили, которые имеют более высокую специфичность. Тем не менее, злоупотребление !important может затруднить управление стилями и отладку.

p { color: red !important; } /* Перебивает все другие правила */

Специфичность пределяет приоритет применяемых стилей на основе типов селекторов и их веса. Она используется браузером для разрешения конфликтов между различными правилами CSS, чтобы определить, какие стили применяются к элементу.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых