Иногда мы сталкиваемся с тем, что какой-нибудь из подключенных стилей не работает. На помощь к нам приходит DevTools, она же панель разработчика, наведя на элемент мы можем посмотреть, какие стили подключены и в каком файле они находятся.
В CSS стили применяются в определенном порядке, который называется каскадом. В каскаде стилей есть несколько уровней приоритета, которые определяют специфичность и важность каждого правила. Вот основные уровни приоритета стилей в CSS:
-
Inline-стили: стили, которые прописываются непосредственно внутри HTML-тега. Они имеют самый высокий приоритет.
-
Internal styles: стили, определенные внутри тега <style> в head-секции HTML-документа.
-
External styles: стили, подключаемые через тег <link> с атрибутом rel=“stylesheet” и атрибутом href, указывающим на путь к CSS-файлу.
-
ID-селекторы: селекторы с использованием идентификаторов (#id).
-
Class-селекторы: селекторы с использованием классов (“.class”).
-
Element-селекторы: общие селекторы, которые не используют идентификаторы, классы или элементы (<html>, <body> и т.д.).
-
Attribute-селекторы: селекторы атрибутов ([attr=value]).
-
Pseudo-селекторы (::before, ::after).
Здесь бы хотелось остановиться на нескольких примерах, с которыми чаще всего сталкиваются начинающие программисты.
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css"> <!-- стили указанные в файле main.css будут перебивать стили в файле normalyze.css -->
<link rel="stylesheet" href="/css/media.css"> <!-- стили указанные в файле media.css будут перебивать стили в файлах main.css и normalyze.css -->
Как мы видим, чем позднее подключен файл, тем выше приоритетность он имеет.
Тоже самое касается и самих правил внутри файлов, чем позже подключено правило, тем у него выше приоритетность.
Также есть один лайфхак, который не очень все любят, но каждый иногда грешит им.
Чтобы стиль стал самым главным, нужно добавить ему правило !important, выглядит это следующим образом:
