Какие знаешь комбинаторы

А, слушай, вот эта ваша CSS-магия с комбинаторами! Ну, это как в семье, блядь: кто кому кем приходится, кто на ком стоит и кто кого ебёт по иерархии. Разбираем, сука, по полочкам, чтобы не путать бабушек с внучатами.

1. Пробел (потомок) — это, блядь, самый распиздяйский отбор. Ищет всех, до кого может дотянуться, по всем углам и подвалам.
   div p { color: red; } — это значит: «Все параграфы, которые где-то там, в пизду, внутри дива сидят, хоть правнуки, хоть праправнуки — всем красненькое!»

2. > (дочерний) — а вот это уже строже, блядь. Только прямые отпрыски, сука! Без посредников.
   ul > li { margin: 0; } — «Эй, ты, список! Обнули отступы только у своих родных, прямых детишек-лишек. А тех, что внутри ещё какого-нибудь вложенного дива сидят — нихуя, они не наши».

3. + (соседний) — это про ближайшего соседа, который идёт сразу за тобой. Как в очереди за водкой.
   h2 + p { font-size: 1.2em; } — «Первый параграф, который уселся на шею сразу после заголовка h2 — получай увеличенный шрифт! Остальные, кто дальше в очереди, — идите нахуй».

4. ~ (родственный) — а это, блядь, уже братва вся, которая идёт после тебя на одном уровне.
   h2 ~ p { color: blue; } — «Все параграфы, которые находятся в одной песочнице со мной, заголовком h2, но только те, что после меня — всем синеть! А те, что до — вы не родня, пошли вон».

Вот, смотри пример, чтобы вообще всё встало на свои ебальники:

/* Все ссылки в списке — хоть где, хоть на каком уровне вложенности, всех зелёним. Распиздяйство! */
ul a { color: green; }

/* А вот это уже армейский порядок, блядь. Только ссылки, которые являются прямыми детьми пунктов меню, которые сами — прямые дети списка, который — прямой ребёнок навигации. Иди по цепочке, не хуй собачий! */
nav > ul > li > a { font-weight: bold; }

Короче, вся суть в том, чтобы понимать, кого и на каком основании ты, сука, выбираешь для стилевой порки. А то начнёшь всех подряд красить — получишь пиздец, а не вёрстку.