5. Убрали outline без замены
:focus { outline: none } без альтернативного :focus-visible-стиля делает сайт недоступным для клавиатуры. Фокус должен оставаться видимым.
Урок 11. Ошибки: Селекторы CSS
⚡ Кратко
Большинство ошибок CSS диагностируется проверкой селектора, пути к файлу, порядка правил и DevTools.
Типичные ошибки
1. Забыли точку перед классом
Без точки card — это селектор тега <card> (такого тега нет), и правило ни на что не действует. Слева блок остался серым, потому что селектор не совпал; справа добавлена точка — и стиль применился.
class="card" — стиль НЕ применился (искали тег <card>)
class="card" — стиль применился ✓
/* ❌ как ломается: ищет тег <card> */
card { background: #fef08a; }
/* ✅ как правильно: ищет class="card" */
.card { background: #fef08a; }2. Пробел вместо > (или наоборот)
.card p ловит p на любой глубине, .card > p — только прямых детей. Если ждали «все абзацы», а написали >, вложенные останутся без стиля. Ниже .card > p пропустил абзац внутри вложенного блока.
прямой p — выбран ✓
вложенный p — пропущен (не прямой ребёнок)
/* ловит только верхний абзац */
.card > p { background: #fef08a; }
/* ловил бы оба абзаца */
.card p { background: #fef08a; }3. Случайно склеили селекторы
Пропущенный пробел меняет смысл: .card .primary (с пробелом) — потомок, а .card.primary (без пробела) — один элемент с двумя классами сразу. Это разные элементы.
.card.primary — один элемент с двумя классами
.card
.primary — потомок внутри .card
/* один элемент: и .card, и .primary */
.card.primary { … }
/* .primary ВНУТРИ .card (потомок) */
.card .primary { … }4. Чрезмерная специфичность через id и длинные цепочки
Правило вроде #sidebar .menu li a.active работает, но переопределить его потом почти невозможно — приходится писать ещё длиннее. Держите селекторы короткими и опирайтесь на классы.
Как правильно: вместо
#sidebar ul li a используйте один класс .nav-link. Меньше специфичность — легче переопределять (подробнее в уроке 12).