Что такое CSS-комбинаторы и чем они отличаются друг от друга?

Question

Accepted Answer

## Суть

**Комбинаторы** связывают селекторы и задают отношение между элементами в дереве.

## Виды

- **Потомок** `A B` — любой `B` внутри `A` на любой глубине.
- **Дочерний** `A > B` — только прямые дети.
- **Соседний** `A + B` — следующий сосед сразу после `A`.
- **Общий сосед** `A ~ B` — все следующие соседи `B` после `A` на том же уровне.

```css
nav a { color: blue; }       /* потомки */
nav > ul { margin: 0; }      /* прямые дети */
h2 + p { margin-top: 0; }    /* сосед */
h2 ~ p { color: #555; }      /* общие соседи */
```

## Итог

Комбинаторы сужают выборку без лишних классов. На собеседовании важно не путать `>` с пробелом и `+` с `~`.