Найдите недействительный, переопределенный, неактивный и другой CSS.

София Емельянова
Sofia Emelianova

В этом руководстве предполагается, что вы знакомы с проверкой CSS в Chrome DevTools. См. раздел «Просмотр и изменение CSS» , чтобы изучить основы.

Проверьте созданный вами CSS

Предположим, вы добавили к элементу CSS и хотите убедиться, что новые стили применяются правильно. Когда вы обновляете страницу, элемент выглядит так же, как и раньше. Что-то не так.

Первое, что нужно сделать, — это проверить элемент и убедиться, что ваш новый CSS действительно применен к элементу.

Иногда вы увидите новый CSS-код на панели «Элементы» > «Стили» , но он отображается бледным текстом , не подлежит редактированию, перечеркнут или имеет значок предупреждения или подсказки рядом с ним.

Понимание CSS на панели «Стили»

Панель «Стили» распознает множество проблем CSS и выделяет их по-разному.

Совпадающие и несовпадающие селекторы

На панели «Стили» совпадающие селекторы отображаются обычным текстом, а несовпадающие — бледным текстом .