Css приоритеты: Приоритет в CSS | Уроки

Приоритет в CSS | Уроки

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

<p>
  MarkSheet — это бесплатное руководство по HTML и CSS.
</p>

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

p { color: blue; }

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

.message { color: green; }

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

#introduction { color: red; }

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

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

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

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

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

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

Вычисление 100

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

• идентификаторы стоят 100;
• классы стоят 10;
• селекторы тега стоят 1.

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

CSS

#introduction { color: red; }
.message { color: green; }
p { color: blue; }

HTML

<p>
  MarkSheet — это бесплатное руководство по HTML и CSS.
</p>

Правило #introduction { color: red; } является более

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

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

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

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

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

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

Перейти к заданиям

Автор: Джереми Томас

Последнее изменение: 13. 08.2017

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

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

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

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

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

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

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

div

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

. wrap {
  font-size: 14px;
}
#main {
  font-size: 16px;
}
div {
  font-size: 13px;
}

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

div.wrap {
  font-size: 15px;
}
.wrap {
  font-size: 20px;
}

Правильный ответ – 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 {
  font-size: 13px !important;
}

Рекомендации по написанию CSS

Есть несколько популярных методологий: БЭМ от Яндекса, Атомарный CSS, SMACSS и т.д. Подробнее почитайте в интернете про каждую, у них есть как плюсы так и минусы. Не так важно что вы будете использовать в работе, самое главное придерживаться какому-то одному направлению, а не всего почучуть.

От себя бы порекомендовал бы следующее:

1. Не привязывайте стили к родительским блокам, если их потом можно применять в другом месте на сайте. И уж тем более не привязывайте стили к ID без крайней на то необходимости. Категорически плохо писать для каждой отдельной страницы
#contact-page li а затем #about-page li и т.д.

2. Не создавайте простыню из стилей в правиле “родитель -> потомок -> кум -> сват -> брат”, это никому не нужно. Если вы считаете что указание 1 класса мало, напишите еще 1-2, но не больше.

3. Используйте ТОЛЬКО классы. В некоторых случаях допустимо указывать вложенные теги (например .table-good td). Не используйте стили для ID, или глобальные стили без необходимости.

4. Если вы используете JavaScript или jQuery, и пишите события для этих классов, которые не будут стилизованы (например, active или visible), то пишите классы как js-submit (с приставкой js-), а стили задавайте отдельно. Будет куда понятней, что ссылка a class=”js-submit btn btn-default” содержит стили и js событие.

Всем спасибо за прочтение, буду благодарен за какие-то дополнения к статье. Делитись в комментариях своим полезным опытом 🙂

CSS Priority — бесплатный учебник по HTML и CSS

css Следующая статья Предыдущая статья

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

 <р>
  MarkSheet — это бесплатный учебник по HTML и CSS.
 

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

 p{ цвет: синий;} 

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

 .
 
  message{ цвет: зеленый;} 

Или мы можем использовать его id :

 #introduction{ color: red;} 

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

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

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

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

 p{ цвет: зеленый;}
р {цвет: красный;}
/* Абзацы будут красными */ 

Мера 100

Один из быстрых способов выяснить, насколько «мощным» является правило CSS, — измерить специфичность

селекторов :

.

• #id селекторы стоят 100
• селекторы .class стоят 10
• тег селектор стоит 1

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

 #introduction{ цвет: красный;}
.message{цвет: зеленый;}
р{ цвет: синий;} 

 <р>
  MarkSheet — это бесплатный учебник по HTML и CSS.
 

MarkSheet — это бесплатный учебник по HTML и CSS.

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

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

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

При написании CSS легко написать конфликтующих правил , где одно и то же свойство применяется несколько раз.

Во избежание этого:

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

  , а

  , что является более семантически описательным

• не использовать встроенные стили
  как

Наверх

Изучайте CSS с помощью моей электронной книги

Эта электронная книга представляет собой пошаговое руководство, в котором я научу вас, как создать собственную личную веб-страницу с нуля, строка за строкой, с помощью HTML5, CSS3 и даже JS.

Получи это сейчас

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

MarkSheet Джереми Томаса находится под лицензией Creative Commons BY-NC-SA 4.0 International License.

Базовый исходный код, используемый для форматирования и отображения этого веб-сайта, находится под лицензией MIT.

Питаться от Джекил. Размещено на Гитхаб.

html — Каковы приоритеты среди селекторов CSS

спросил 13 лет, 5 месяцев назад

Изменено 5 лет, 6 месяцев назад

Просмотрено 18 тысяч раз

CSS Вопрос: Если к элементу применяются два разных селектора, кто выигрывает?

Я знаю, что этого не должно происходить, но я хочу настроить унаследованное приложение, а CSS мешает.

• HTML
• CSS
• CSS-селекторы

1

Кровавые подробности в спецификации вполне читаемы. В итоге:

1. !важно правила и встроенные правила стиля выигрывают больше всего.

2. В противном случае обычно выигрывает более конкретный вариант. #id — более конкретный селектор, чем .classname — более конкретный селектор, чем тэг .

3. Если правила одинаково специфичны, побеждает тот, который объявлен последним.

Нет особых причин, по которым это «не должно происходить». Обычно указывается общее правило, а затем добавляется более конкретное правило для одного случая; несколько правил с одинаковыми свойствами для одного элемента не являются чем-то необычным или нежелательным.

1

вы должны найти #no of id =A ,#no of class =B и #no of tag =c в селекторе

ABC с более высоким значением выигрывает.

 .wrapper .title p {
  // некоторые другие правила
}
А=0 В=2 С=1 =021
\#foo {
  // еще несколько правил
}
А=1 = 100
.bar .head div li{
  // еще несколько правил
}
А=0 В=2 С=2 =022
 

100>022>021

поэтому #foo выигрывает

1

Это должно случиться! Вот почему это называется КАСКАДНЫМИ таблицами стилей. Вы можете найти пример приоритетов здесь

«#id» более мощный, чем имя «.class», а «.class» более мощный, чем имя «тег». Но если мы применим «!important», то его приоритет будет у большинства из них.

• !важно
• встроенный стиль
• идентификатор
• класс
• тег

См. раздел спецификации, посвященный порядку специфики (наряду с остальной частью этой главы, так как !important правила и порядок, в котором правила появляются в таблице стилей, также имеют значение).

Приоритет между селекторами определяется их специфичностью. Более конкретные селекторы выигрывают у менее конкретных.

Если два селектора одинаково специфичны, то более поздний имеет преимущество перед первым.

Существует три уровня специфичности: идентификатор, класс и элемент. Таким образом, #elem выигрывает у .elem , так как идентификатор является более конкретным. .elem .cont выигрывает у .elem , так как имеет больше селекторов на том же уровне.

Подробнее читайте в разделе «Что происходит при возникновении конфликтов?» в Селекториале.

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

Подробнее о специфичности селектора: Энди Кларк написал «Войны специфичности», которые являются лучшим обзором того, как они работают.

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