Что означает слово специфичность в css

Специфичность (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. Элементы и псевдоэлементы:

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

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

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

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

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

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

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

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

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

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

```html
<!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` может затруднить управление стилями и отладку.

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

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

June 6, 2024, easyoffer

Примеры ответов: