Как задать приоритет стилю css

Как повысить приоритет стилей в css, если к странице подключены два файла css

Для указания псевдо-класса используется одинарное двоеточие ( : ), например:

Для указания псевдо-элементов используется двойное двоеточие ( :: ), например:

Для обратной совместимости оставили возможность указывать псевдо-элементы с одним двоеточием.

Так как в вопросе речь про псевдо-класс, нужно изменить

.payment::hover

.payment:hover

button < border-color: #659BDB; color: #191970; >button:hover < background: #659BDB; color: white; >.payment < border-color: #EE0000; color: #EE0000; >.payment:hover < background: #EE0000; color: white; >.payment::hover < /* не работает */ background: black; color: green; >

Приоритет в CSS

Элемент HTML может быть целью нескольких правил CSS. Давайте воспользуемся простым абзацем в качестве примера:

Мы можем изменить этот абзац просто используя имя тега:

Или же можем воспользоваться именем класса:

.message

Или можем использовать идентификатор:

#introduction

Поскольку браузер может выбрать только один цвет и применить его к этому абзацу, то он должен решить, какое правило CSS имеет приоритет над другими. Это называется приоритетом в CSS (или специфичностью).

В нашем примере абзац будет красным, потому что идентификатор более специфичен и, таким образом, более важен, чем другие селекторы.

Порядок правил CSS

Если в вашем CSS есть одинаковые селекторы, то последний из них будет иметь приоритет.

p < color: green; >p < color: red; >/* Абзац будет красным */

Вычисление 100

Есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов:

Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.

#introduction < color: red; >.message < color: green; >p

Правило #introduction < color: red; >является более специфичным, чем другие, потому что идентификаторы должны быть уникальными по всей веб-странице, таким образом, может быть только один целевой элемент.

.message < color: green; >будет нацелен на любой HTML-элемент с атрибутом class=»message» и, следовательно, менее специфичен. То же самое относится и к p < color: blue; >, который может предназначаться для любого абзаца.

Как избежать конфликтов

Во время написания вашего CSS могут легко возникнуть противоречивые правила, в которых одно и то же свойство применяется несколько раз.

Чтобы избежать этого:

применяйте только классы: используйте .introduction вместо #introduction , даже если этот элемент появляется на вашей веб-странице только один раз;
избегайте применять несколько классов к одному элементу HTML: пишите не , а , который является семантически более описательным;
не используйте встроенные стили, такие как .

Каскадность CSS. Приоритеты стилей

В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:

подключить внешнюю таблицу стилей;
добавить внутреннюю таблицу стилей в HTML-документ через тег ;
определить стиль элемента, применив к тегу атрибут style с необходимыми значениями (inline-стиль).

Эти способы добавления стилей могут быть использованы одновременно. К примеру, для тегов

может быть одновременно задан стиль как во внешней таблице стилей, так и во внутренней. Кроме того, в одной таблице стилей может быть записано несколько вариантов форматирования тегов

. Например:

p .your_class p #your_id p

В этом примере для тегов

указано три варианта форматирования. Но каким образом браузер расставляет приоритеты между стилями? Какой стиль из вышеприведенных будет выбран и по какому принципу? Это нам и предстоит выяснить.

Приоритеты стилей

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора. Чем больше вес, тем выше приоритет:

Селектор тега:	1
Селектор класса:	10
Селектор ID:	100
Inline-стиль:	1000

Когда селектор состоит из нескольких других селекторов, необходимо посчитать их общий вес. Вот как вычисляется приоритет: за каждый селектор добавляется 1 в соответствующую ячейку. В остальных ячейках стоят нули. Чтобы получить общий вес, необходимо «склеить» все числа в ячейках.

Селектор	ID	Класс	Тег	Общий вес
p	0	0	1	1
.your_class	0	1	0	10
p.your_class	0	1	1	11
#your_id	1	0	0	100
#your_id p	1	0	1	101
#your_id .your_class	1	1	0	110
p a	0	0	2	2
#your_id #my_id .your_class p a	2	1	2	212

Если случилось так, что два селектора имеют одинаковый вес, то приоритет отдается тому стилю, который находится ниже в коде. Если для одного элемента задан стиль и во внешней, и во внутренней таблицах, то приоритет отдается стилю в той таблице, которая находится ниже в коде.

Пример: во внутренней таблице стилей задан красный цвет для тегов

, а во внешней – зеленый цвет для этих же тегов. В HTML-документе вы первым делом подключили внешнюю таблицу стилей, а затем добавили внутреннюю таблицу с помощью тега . В итоге цвет тегов

будет красным.

Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

Объявление !important

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important :

Также !important перекрывает inline-стили. Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

Сброс стилей с помощью reset.css

В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.

Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table

Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.

Конечно же, существуют и другие вариации Reset CSS, например, более популярный сейчас Normalize.css, который, в отличие от Reset CSS, сохраняет много полезных стилей по умолчанию, а не стирает их начисто. Это удобно, поскольку избавляет от необходимости вновь объявлять стили для многих стандартных элементов.
Если требуется, вы и сами можете создать свой файл сброса стилей, исходя из ваших потребностей.

А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:

в первом селекторе собраны наиболее популярные теги, для которых удаляются все отступы, рамки и поля, а также назначается размер шрифта 100%;
второй групповой селектор предназначен для правильного отображения тегов HTML5 в старых браузерах;
с помощью свойства line-height селектора body устанавливается одинаковый интерлиньяж (межстрочный интервал) для текста;
для списков ol , ul убраны маркеры;
отменены кавычки и другой контент перед и после содержимого тегов blockquote , q ;
упрощено добавление рамок для ячеек таблиц.

Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.

Итоги

Каскадность в CSS – это способность стилевых правил накладываться друг на друга, перезаписывать и смешиваться. Итоговый стиль элемента, который виден в браузере – это комбинация нескольких последовательно примененных стилей.

При конфликте нескольких стилей срабатывает правило приоритетов. Предпочтение отдается тому стилю, который считается более значимым.

Необходимо знать, как работают правила распределения приоритетов между стилями, чтобы создавать грамотные таблицы стилей.

Первая часть нашего учебника подошла к концу. Второй раздел книги мы начнем с изучения CSS шрифтов, веб-шрифтов и способов их подключения.

CSS – Как выставляется приоритеты у стилей?

Многие начинающие верстальщики упускают одну очень важную вещь – приоритет стилей. После прочтения этой статьи у вас не останется вопросов �� .

Какой стиль выбирается первым если их несколько в CSS?

Cascading Style Sheets, ни что иное, как каскадная таблица стилей. Одна из частей этого механизма, это возможность задавать несколько стилей для одного HTML элемента.

Почему я написал правило, а оно не применилось в CSS? Ответ всё тот-же – приоритет. Разберемся при помощи простой таблицы, какие стили получит элемент и почему:

Тег, например p:	1
Класс, например .class:	10
ID, например #main:	100
Inline-стиль, например style=”font-size: 16px;”:	1000

Давайте рассмотрим на примере, чтобы было более понятней:

и напишем такие стили:

.wrap < font-size: 14px; >#main < font-size: 16px; >div

Как вы думаете какой стиль будет применен? Правильный ответ – #main. Давайте теперь напишем другие стили:

div.wrap < font-size: 15px; >.wrap

Правильный ответ – div.wrap. Почему так? Тег по “весу” у нас 1, класс 10, итого 11. 11 > 10, а значит у этого правила выше приоритет.

Получается, каждое правило в вашей таблице стилей имеет свой “числовой вес”, который считается как сумма за каждый отдельный селектор.

Поэтому, если ваше правило состоит из очень многих “родительских и дочерних элементов”, то вовсе не удивительно, что указав один лишь класс вы не сможете перекрыть стили.

К примеру, пред. разработчик написал такой стиль

#contact ul.header-nav li.header-list a.header-link <>

суммарно это 133, а такое число попробуй еще перебить �� .

Можно ли использовать !important ?

!important пишется в тяжелых случаях, и в целом его использовать не рекомендуется. Применять его стоит лишь тогда, когда вы не можете перекрыть чужие стили, или такой вот “привет из прошлого” как style=”font-size: 15px;”.

Инлайновые стили использовать кроме как в почтовых шаблонах вообще нельзя. Все стили должны храниться в файле со стилями, но если случай экстримальный, и вы уж никак не можете повлиять на такой блок, то дописывайте !important, пример:

#nav li