Приоритеты css – Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили

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

Приоритет от способа подключения стилей CSS.

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

Какой из этих стилей будет приоритетнее для браузера? Какой он отобразит в итоге? 

В этой серии видеоуроков мы с вами попытаемся разобраться с этими вопросами. 

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

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

Файл index.html

<style>
   .red {
     color:blue;
    }
</style>
...
<p>Абзац</p>

Файл style.css

<style>
   .red {
     color:red;
    }
</style>

В этом примере у нас есть 3 источника, в которых задается значение цвета текста для элемента абзаца с атрибутом:

1 - атрибут style

2 - внутри элемента style

3 - внутри файла style.css

Самое главное, значение цвета текста, в каждом из этих источников противоречит друг другу. 

Какое значение стиля CSS в итоге будет применено к элементу? Каким цветом в итоге будет отображаться наш абзац? Зеленым, синим или красным?

Если вы откроете эту веб-страницу в браузере, вы увидите, что абзац отобразиться зеленым цветом текста.

Т.е. самым приоритетным с точки зрения подключения стилей CSS будет являться внутренний стиль, который применяется с помощью атрибута style.

Если удалить этот стиль, то более приоритетным становится стиль внутри элемента style. Это является вторым по приоритету способом применения стилей CSS.

Последним по приоритету применения стилей CSS будут являться стили внутри файла style.css.

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

Приоритет от места нахождения в коде.

Давайте рассмотрим еще один случай "конфликта" стилей CSS (когда они противоречат друг другу). Это тот случай, когда в пределах одного источника подключения файлов стилей CSS, например мы подключаем стили из файла style.css и в этом файле произошел конфликт стилей CSS: стили накладываются друг на друга.

Предположим, что файл style.css длинный и в нем есть селектор .red, но, который имеет свойства и значения, которые противоречат друг другу.

Например,

.red {
color:red;
}
…
.red {
color:blue;
}

Т.е. один и тот же селектор, одно и то же свойство color, но имеет разные значения. Какое значение в итоге будет применено к выбранному абзацу? Он станет синим или он станет красным?

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

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

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

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

CSS: Специфичность (приоритет) селекторов

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

Специфичность селекторов (selector's specificity) определяет их приоритет в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. Для вычисления специфичности селектора используются три группы чисел (a, b, c), расчёт производится следующим образом:

  • Считается число идентификаторов в селекторе (группа a)
  • Считается число селекторов классов, атрибутов и псевдо-классов в селекторе (группа b)
  • Считается число селекторов типа и псевдо-элементов в селекторе (группа c)
  • Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора
  • Универсальный селектор (*) и комбинаторы не участвуют в вычислении веса селектора

В примере ниже селекторы расположены в порядке увеличения их специфичности:


*               /* a=0 b=0 c=0 -> специфичность =   0 */
li              /* a=0 b=0 c=1 -> специфичность =   1 */
ul li           /* a=0 b=0 c=2 -> специфичность =   2 */
ul ol+li        /* a=0 b=0 c=3 -> специфичность =   3 */
h2 + *[rel=up]  /* a=0 b=1 c=1 -> специфичность =  11 */
ul ol li.red    /* a=0 b=1 c=3 -> специфичность =  13 */
li.red.level    /* a=0 b=2 c=1 -> специфичность =  21 */
#x34y           /* a=1 b=0 c=0 -> специфичность = 100 */
#s12:not(p)     /* a=1 b=0 c=1 -> специфичность = 101 */

Самый высокий приоритет имеет число из группы «a», число группы «b» имеет средний приоритет, число из группы «c» имеет наименьший приоритет. Числа из разных групп не суммируются в одно общее, т.е. возьмём из примера последнюю строку со специфичностью селектора «101» - это не означает число «сто один», это значит, что был использован один селектор из группы «a» (идентификатор) и один селектор из группы «c» (селектор типа).

Встроенный стиль, имеет больший приоритет, чем стиль определённый во внутренней или внешней таблице стилей. Однако, если для конкретного свойства во внутренней или внешней таблице стилей указать специальное объявление !important, то оно будет иметь больший приоритет, чем значение аналогичного свойства, у внутреннего стиля. Объявление !important указывается после значения свойства перед точкой с запятой:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #one { color: red; }
      #two { color: blue !important; }
    </style>
  </head>
  <body>

    <p>Первый абзац</p>
    <p>Второй абзац.</p>

  </body>
</html>
Попробовать »

С этой темой смотрят:

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 событие.

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

Приоритет и наследование в СSS на практике

Приоритет и наследование в СSS на практике

По просьбам читателей сегодня я попытаюсь раскрыть такую важную тему в CSS, как приоритет и наследование. А так же вы узнаете о незаменимом помощнике в контексте сегодняшней темы, как для верстальщика, так и для front-end разработчика – веб-инспекторе.

О наследовании в CSS

Что нужно знать о наследовании в CSS при верстке сайтов? Рассмотрим это на примере фрагмента макета.

Приоритет и наследование в СSS на практике

Верстальщик должен стремится не плодить лишний код, ведь для этого и существует принцип наследования. Верстка любой страницы начинается с тега body. Это значит, что мы прописываем цвет фона страницы и все атрибуты основного шрифта заранее в тег body (предок). То есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют белый фон и заданный шрифт, если мы не перебьем их другими свойствами.

Если для тега h2 зададим другие значения цвета и шрифта, в таком случае тег h2 уже не потомок body.

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

О приоритетах в CSS

Приоритетность таблиц стилей в порядке возрастания для верстальщика:

  1. таблицы стилей самого браузера
  2. внешний css файл, подключаемый к странице через <link>
  3. таблицы стилей написанные на самой странице между тегами <style>..</style>
  4. таблицы стилей внутри атрибута style="..."
  5. самый высокий приоритет у стилей с пометкой на конце important!

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

В каких случаях надо писать стили внутри страницы? Если, эта страница уникальна по дизайну, отличается от остальных.

Это была теория, на практике же все выглядит куда понятнее. Очень часто верстальщику приходится разбираться в чужом коде. Например стоит такая задача – изменить цветовую гамму страницы или всего сайта. Если этот условный сайт сверстан вручную и достаточно грамотно, то найти какие из стилей применены к тому или иному тегу, легко. Просто следуя тем существующим правилам приоритета и наследования. Смотрите какие стили на странице расположены ниже или специфичнее (#id против .class) и совсем уже явно – это !important, те и будут главнее.

Сущий ад начинается, если сайт работает например на WordPress-е. Там столько всего намешано: несколько CSS внешних файлов (wp темы, bootstrap-а, плагинов woocommerce, jetpack, виджетов, шорткодов) и это не считая styles внутри страниц. Как же в такой каше разобраться?

Волшебный веб-инспектор

Открываете искомую страницу в браузере Google Chrome --> Дополнительный инструменты --> Инструменты разработчика

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

Давайте разбираться пошагово:

  1. Нажать на стрелочку
  2. Выделить заголовок на сайте
  3. На DOM дереве выделится h2
  4. В правой части появится в самом верху селектор h2 с атрибутом color #111;
  5. Правее h2 вы увидите файл style.css, при наведении на который, появится путь до него

В нашем примере, это style.css темы WordPress-а. Это подтвердилось, тем, что мы щёлкнув по черному квадратику рядом с атрибутом color, выбрали другой цвет. Цвет изменился, значит файл стилей выбран верно.

Приоритет и наследование в СSS на практике  Приоритет и наследование в СSS на практике

Вся правая часть вкладки Styles описывает только тег h2.

<h2>The Red Baron – Dog Hat and Scarf Set</h2>
  • inherit from - история наследования
  • зачеркнутые строчки – переопределенные стили
  • injected stylesheet – внутренние стили внутри тега <style>
  • user agent stylesheet – дефолтные стили браузера
 Приоритет и наследование в СSS на практике

В Styles отображаются все изменения, которые происходили с тегом h2. А вкладка Computed показывает – что в итоге осталось, окончательный вариант.

Как видите все не так страшно, при правке чужого кода, вам в помощь веб-инспектор. А когда вы сами верстаете с нуля, вы же двигаетесь поэтапно и сразу видите результат.

  •  Приоритет и наследование в СSS на практике Создано 08.02.2018 11:40:00
  •  Приоритет и наследование в СSS на практике Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Каскадирование | htmlbook.ru

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.

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

  1. Стиль браузера.
  2. Стиль автора.
  3. Стиль пользователя.
  4. Стиль автора с добавлением !important.
  5. Стиль пользователя с добавлением !important.

Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.

Как задавать пользовательский стиль рассказывалось в главе 1 (см. рис. 1.3 и 1.4).

!important

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

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

  • !important добавлен в авторский стиль — будет применяться стиль автора.
  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  • !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль пользователя.
  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Синтаксис применения !important следующий.

Свойство: значение !important

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

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

Специфичность

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.

*              {} /* a=0 b=0 c=0 -> специфичность = 0   */
li             {} /* a=0 b=0 c=1 -> специфичность = 1   */
li:first-line  {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul li          {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul ol+li       {} /* a=0 b=0 c=3 -> специфичность = 3   */
ul li.red      {} /* a=0 b=1 c=2 -> специфичность = 12  */
li.red.level   {} /* a=0 b=2 c=1 -> специфичность = 21  */
#t34           {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление !important перекрывает в том числе и встроенные стили.

Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что указан в коде ниже.

В примере 19.1 показано, как влияет специфичность на стиль элементов списка.

Пример 19.1. Цвет списка

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   #menu ul li {
    color: green;
   }
   .two {
    color: red;
   }
  </style>
 </head>
 <body>
  <div>
   <ul>
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
   </ul>
  </div>
 </body> 
</html>

В данном примере цвет текста списка задан зелёным, а второй пункт списка с помощью класса two выделен красным цветом. Вычисляем специфичность селектора #menu ul li — один идентификатор (100) и два тега (2) в сумме дают значение 102, а селектор .two будет иметь значение специфичности 10, что явно меньше. Поэтому текст окрашиваться красным цветом не будет. Чтобы исправить ситуацию, необходимо либо понизить специфичность первого селектора, либо повысить специфичность второго (пример 19.2).

Пример 19.2. Изменение специфичности

/* Понижаем специфичность первого селектора */
 ul li {...} /* Убираем идентификатор */
 .two  {...}

/* Повышаем специфичность второго селектора */
 #menu ul li {...}
 #menu  .two {...} /* Добавляем  идентификатор */

 #menu ul li {...}
 .two { color:  red !important; } /* Добавляем !important */

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

Вопросы для проверки

1. Какая специфичность будет у селектора table.forum tr:hover p?

  1. 14
  2. 22
  3. 23
  4. 32
  5. 41

2. Какая специфичность будет у селектора #catalog .col3 .height div?

  1. 301
  2. 203
  3. 121
  4. 40
  5. 31

Ответы

1. 23

2. 121

Каскадность и приоритетность в CSS.

В этом уроке мы продолжим тему, которую начали в предыдущем уроке и если там говорилось о наследовании в CSS, то вместе с наследованием идут, рука об року, такие моменты как каскадность и приоритетность.

И, давайте начнем с каскадности. Что такое каскадность? и почему таблица стилей называется каскадной?

Для примера возьмем абзац(параграф) p

, у которого есть определенные правила text-indent:30px;. Это будет означать, что для данного параграфа задан отступ 30px.

HTML

	

Обычный параграф для примера

CSS

body{
color: #ff0000;   
font-size: 20px;
font-family: courier new; 
}
P{
 text-indent:30px;
}

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

Данную запись, виртуально, нужно представлять следующим образом, как будто бы для элемента «P» заданы следующие условия:

CSS

P{
 text-indent:30px;
 color: #ff0000;   
 font-size: 20px;
 font-family: courier new; 
}

Это и является каскадностью.

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

Что такое приоритетность? Как мы уже знаем, у одного и того же элемента может быть множество родителей. И давайте рассмотрим такую ситуацию: У нас есть список <ul> </ul>, у которого, как уже известно, имеются элементы <li> </li>. Что подразумевает, что у элементов <li> </li> есть тег-родитель <ul> </ul>, а их общим родителем будет являться тег <body> </body>. Рассмотрим ниже наглядно, как это получается:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
  • Список для примера
  • Список для примера
  • Список для примера

Ниже, как мы видим, передаются правила от тега body и от тега ul, сам же элемент li своих правил не имеет. Однако, если Вы заметили, элемент li наследует цвет сразу от двух своих, выше стоящих, родителей body и ul.

CSS

body{
color: #ff0000;   
font-size: 20px;
font-family: courier new; 
}
ul{
 color: #0000ff;  
}

Наверняка возник интересный вопрос, а какой же цвет примет элемент li? Если цвет может быть только одни, а на то, что бы задать этот цвет, претендуют два родителя.
Тут и вступает первое правило приоритетности:
Если элемент наследует какое-то свойство сразу от двух и более выше стоящих родителей, то будет всегда использоваться свойства от ближайшего его родителя. И в примере выше ближайшим родителем для элемента li будет тег ul.

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

CSS

body{
color: #ff0000;   
font-size: 20px;
font-family: courier new; 
}
ul{
 color: #0000ff;  
}
li{
 color: #00ff00;  
}

Что получается в этом случае? На элемент li начинают действовать сразу три цвета один от body, второй от родителя ul и третий, задан для самого элемента.

В этой ситуации главным оказывается то правило, которое задано непосредственно для самого элемента li и все наследования от других элементов будут ИГНОРИРОВАТЬСЯ.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
  • Список для примера
  • Список для примера
  • Список для примера

Какую сейчас картину мы будем наблюдать? Ведь, теперь, у нас элемент списка наследует цвет от элемента body, от элемента ul, от самого тега li, а далее зададим этому же элементу li цвет для класса list-class и его идентификатора listSuper.

Ну и совсем, чтоб все было очень весело, мы, для элемента родителя ul с идентификатором mylist для элемента li у которого класс list-class также зададим свой цвет.

В итоге, мы получаем следующую картину стилей для данного списка:

CSS

body{
color: #000000;  /*черный*/
font-size: 20px;
font-family: courier new; 
}
ul{
 color: #ff0000; /*красный*/  
}
li{
 color: #00ff00; /*зеленый*/
}
.list-class{
 color: #0000ff; /*синий*/
}
#listSuper {
 color: #F8C549; /*желтый*/
}

#mylist li.list-class{
 color: #800000; /*коричневый*/
}

Теперь для одного и того же тега задано очень много вариантов цвета.

1-й вариант - это через атрибут style сразу в самом элементе, где цвет будет малиновый.

2-й вариант - для самого тега li задан зеленый цвет.

3-й вариант - классом .list-class, который находится в теге li, задан цвет синий.

4-й вариант – идентификатором, в этом же теге #listSuper, задан желтый цвет.

5-й вариант - задаем цвет через родителя, идентификатор #mylist, у которого коричневый цвет.

6-й вариант – просто наследование от своего родителя ul, у которого красный цвет.

7-й вариант – наследование от элемента body, у которого черный цвет.

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

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

И так, первый селектор тегов - это элемент li, который получает 1 бал.

Далее идет селектор классов, у нас он .list-class, который получает 10 балов.

Затем идет id селектор, который задан конкретно для элемента #listSuper, получает 100 балов.

И последний, это встроенный селектор, который встроен у нас через атрибут style, у которого 1000 балов.

Заключение.

И в завершение давайте подобьем итоги и определим какой же цвет выведется на экран:

И так, мы знаем что у элемента есть встроенный стиль , который набирает 1000 балов.

Смотрим дальше, у нас есть селектор тега li он набирает 1 бал. У этого селектора есть еще селектор класса .list-class и он получит 10 балов. Ну и под конец селектор id #listSuper, который наберет 100 балов. В сумме мы получаем 111 балов.

Далее рассмотрим сложный стиль: #mylist li.list-class - что мы имеем, селектор id #mylist получит 100 балов. Затем идет селектор тега li, он набирает 1 бал и селектор класса .list-class, у которого так же 10 балов. В итоге так же 111 балов.

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

ВЫВОД

Что, в результате, мы имеем после расчета? Смело можно сказать что, обновив страницу, у первого элемента списка будет малиновый цвет, так как встроенный селектор дал нам 1000 балов. Данный момент стоит запомнить, что встроенный селектор практически всегда будет набирать наибольшее количество балов, таким образом, он всегда будет применяться первым.

Следуем дальше, и у нас возникла такая ситуация что сложный селектор #mylist li.list-class и селекторы элемента набрали одинаковое количество балов по 111. В этом случае действует следующее правило, которое гласит, что ниже стоящий элемент в таблице стилей имеет большей приоритет. Другими совами тот вариант условия, который стоит ниже по коду и будет применен для элемента.

И на картинке наглядно видно как браузер расставил приоритетность для данного

элемента:

На этом будем завершать данный урок, урок достаточно сложный и Вам стоит уделить ему особое внимание. Разберитесь с этой темой, так как данная тема является очень важной в CSS.


Отправить ответ

avatar
  Подписаться  
Уведомление о