Приоритет css стилей: Приоритет в CSS | Учебные курсы

Leave a Comment / Css / By /

Приоритет в 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>.

См. также

  • Знакомство с CSS
  • Написание хорошего кода
  • Форматирование HTML

Автор и редакторы

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

Последнее изменение: 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 событие.

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

html — приоритет стиля CSS

Задавать вопрос

спросил

Изменено 4 года, 1 месяц назад

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

У меня проблемы с приоритетом объявления CSS. Моя страница содержит внешний файл CSS с правилом и некоторыми встроенными объявлениями CSS, которые должны переопределять это правило. Насколько я понимаю, объявления встроенного стиля должны переопределять внешние объявления CSS. Однако, когда я просматриваю страницу в Chrome, вторая строка таблицы отображается синей, тогда как она должна отображаться красной, как определено во внутренних объявлениях стиля.

Что мне здесь не хватает

Вот HTML:

 
<голова>
    
    <тип стиля="текст/CSS">
        тд, тр, й
        {
            фон: красный;
        }
    

<тело>
    <таблица>
        
            <тд>11
            22
        
        
            аа
            бб

Вот содержимое файла CSS:

 tbody tr:nth-child(even) td,
tbody tr.even td
{
    фон: #e5ecf9;
}
  • HTML
  • CSS
  • CSS-селекторы

1

Количество селекторов имеет значение при расчете того, какое правило имеет наибольшую специфичность.

Две отличные визуализации специфики CSS: http://www.standardista.com/css3/css-specificity/ и http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.

html

Вам не следует просто вставлять !important в правило, которое нужно переопределить (см. Каковы последствия использования «!important» в CSS?), а вместо этого изменить селектор, чтобы придать вашему правилу больший или равный вес импортированному правилу.

Например, следующее сделает все ячейки background:red 

 thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td {
    фон:красный;
}

1

В этом случае его получит более подробное правило.

Попробуйте это в своем HTML: