Как каскад и наследование определяют, какие стили применяются?

Question

Accepted Answer

Когда несколько правил могут стилизовать элемент, два механизма определяют результат: **каскад** (какое правило победит) и **наследование** (какие свойства передаются от родителей к потомкам).

## Каскад — разрешение конфликтов по порядку

Браузер выбирает выигрывающее объявление, проверяя по порядку приоритета:

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Наследование — некоторые свойства передаются потомкам

Некоторые свойства (в основном **связанные с текстом**) автоматически наследуются потомками; большинство — нет.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Наследуются** по умолчанию: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Не наследуются**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Явное управление наследованием

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Краткое резюме специфичности в пределах каскада

Вот почему правило с низкой специфичностью может проиграть, даже если оно написано позже — специфичность проверяется *до* порядка источника. Понимание порядка (importance → specificity → source order) объясняет практически все случаи "мой стиль не применяется".

## Почему это важно

Каскад и наследование — это основная модель *того, как CSS на самом деле разрешается*.

Знание порядка приоритетов помогает отладить конфликты, знание того, какие свойства наследуются, позволяет установить `color`/`font` один раз на `body` вместо того, чтобы устанавливать везде, а `inherit`/`initial`/`unset` дают вам точное управление — вместе они делают CSS предсказуемым вместо магии.