Приоритет css селекторов: Приоритетность селекторов в CSS (специфичность селекторов, selector’s specificity)

Содержание

Приоритетность селекторов в CSS (специфичность селекторов, selector’s specificity)

Введение в использование CSS селекторов

Допустим, у Вас есть несколько селекторов которые ссылаются на один и тот же элемент:


div span { text-decoration:underline; }
span { text-decoration:none; }

Открыв HTML страницу где элемент span находится внутри элемента div мы увидим подчеркнутый текст. А если мы пойдем дальше и с помощью плагина Firebug посмотрим стили вложенного элемента, мы увидим следующее:


div span {
    text-decoration:underline;
}
span {
    text-decoration:none;
}

Сразу же возникает вопрос о причине такого поведения. Ведь второй селектор должен перекрывать первый учитывая каскадность стилей. Данный пример как нельзя четко показывает что такое специфичность селекторов.

Правила специфичности

Специфичность селекторов (selector’s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

В спецификации по CSS 2.1 этой теме посвящен небольшой раздел. Существует 4 правила по которым вычисляется специфичность селекторов:

Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
Второе место занимает присутствие ID в селекторе(#some-id).
Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Все 4 правила сводятся в одну систему a-b-c-d(где а — наивысший приоритет) и образуют специфичность.

Далее рассмотрим принцип построения такой системы специфичности на примере разнообразных селекторов:

Селектор	Специфичность a-b-c-d	Правило №
*	0-0-0-0	—
li	0-0-0-1	4
li:first-line	0-0-0-2	4
ul li	0-0-0-2	4
ul ol+li	0-0-0-3	4
form + *[type=text]	0-0-1-1	3, 4
table tr td. second	0-0-1-3	3, 4
h3.block.title.	0-0-2-1	3, 4
#xyz	0-1-0-0	2
style=» »	1-0-0-0	1

Пример специфичности — правило №1:


<head>
<style type="text/css">
    #summary { color: red }
</style>
</head>
<body>
    <p>content</p>
</body>

Текст внутри элемента p будет отображаться синим цветом независимо от селектора с айди(id), где также указано свойство color со значением red. Правило номер 1 всегда перекрывает все селекторы и имеет наивысшую приоритетность.

Правило №2:


<head>
    <style type="text/css">
        #second { color:green; }
        ul li.second { color:blue; }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
    </ul>
</body>

Несмотря на то что селектор с id указан в стилях сверху, именно он повлияет на отображение документа, так как более специфичен нежели селектор с классом second.

Правило №3:


<head>
    <style type="text/css">
       input[type=text] { font-weight:bold; }
       form input { font-weight:normal; }
    </style>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="Company" />
        <input type="submit" name="Ok" />
    </form>
</body>

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

Вернемся к первому примеру этой статьи — правило №4:

div span { text-decoration:underline; }
span { text-decoration:none; }

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

div span { text-decoration:underline; }
body span { text-decoration:none; }

Теперь селекторы имеют одинаковый вес(0-0-0-2 = 0-0-0-2) касательно специфичности. Второй селектор просто перекроет свойство первого так как описан ниже.

Уверен, что большинство верстальщиков точно знают 2 первых правила специфичности селекторов про id и style и эта статья не была для них чем-то новым. Но не стоит забывать о двух оставшихся, ведь это может существенно приостановить процесс создания верстки и увеличить время выявления возникшей ошибки.

Вот и все о чем я хотел рассказать. Надеюсь, что статья была вам интересна.

—
Владислав Razor Чапюк, апрель 2009

Если Вам понравилась статья, проголосуйте за нее

Голосов: 35
Голосовать

Каскадность в CSS — Основы современной вёрстки

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

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это всё не уйдёт в общий бассейн.

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

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку тёмного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

<p>Какой-то очень интересный текст об интересной вещи. Очень интересно.</p>

В CSS файле укажем следующие стили:

p {
  font-size: 24px;
}

.text-bold {
  font-weight: bold;
}

.text-dark {
  color: #333333;
}

Попробуйте воспроизвести этот пример и вы увидите, что текст выводится тёмного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

{
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}

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

Приоритет селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберём на примере. Возьмём параграф с классом red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зелёный цвет.

p {
  color: green;
}

.red {
  color: red;
}

#blue {
  color: blue;
}

<p>Какого же цвета будет параграф?</p>

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

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф всё равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

Селектор по идентификатору (#blue)
Селектор по классу (.red)
Селектор по тегу (p)

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберём ещё один пример:

p {
  color: blue;
  font-weight: bold;
}

.important {
  color: purple;
  font-style: italic;
}

#intro {
  color: green;
}

<p>Индейские племена Манахаттоу и Канарси. </p>

Этот текст будет наклонным, жирным и зелёным. И вот почему:

Селектор по тегу p:
- Добавит синий цвет
- Добавит жирное начертание
Селектор по классу .important:
- Заменит ~~синий цвет~~ на пурпурный
- Сделает текст курсивным
Селектор по идентификатору #intro:
- Заменит ~~пурпурный цвет~~ на зелёный

После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

{
  color: green;
  font-weight: bold;
  font-style: italic;
}

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

Переопределение свойств

Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере.

.alert {
  color: gray;
}

.alert-error {
  color: red;
}

<p>Важное сообщение! Сообщение красного цвета</p>

Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

<p>Важное сообщение! Сообщение красного цвета</p>

цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.

.alert-error {
  color: red;
}

.alert {
  color: gray;
}

<p>Важное сообщение! Сообщение серого цвета</p>

Дополнительное задание

Создайте файлы index.html и style.css на своём компьютере.

Внутри HTML расположите следующую запись:

<div>Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;

  background: #333333;
}

#main {
  color: white;
  width: 750px;
}

.text-white {
  color: white;
}

.alert {
  height: 350px;
  color: gray;
}

div {
  background: blue;
}

.alert-warning {
  background: #000000;
  color: yellow;
}

Проанализируйте получившийся результат.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите
ctrl + enter
и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

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

Обновлено 7 января 2021

Комбинации и группировка селекторов в CSS
Как и для чего группируют селекторы в CSS коде
Приоритеты Css свойств (с important и без него)
Как повышают приоритеты Css свойств в авторских стилях

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo. ru. Сегодня я предлагаю продолжить разговор про селекторы в Css, который мы начали еще в приведенной статьей. Еще раньше мы с вами познакомились с тем, что такое таблицы каскадных стилей, узнали, что означают пиксели или EM в размерах принятых в Css и многое другое.

Все материалы по таблицам каскадных стилей, которые уже были опубликованы на этом блоге, вы сможете найти в Справочнике. Сегодня же мы поговорим сначала про то, как можно комбинировать и группировать селекторы, а затем подробно рассмотрим приоритеты (что это?) правил, которые применяются для одного и того же элемента в Html коде (Important, подсчет селекторов и запись правил в атрибуте style).

Комбинации и группировка селекторов в CSS

Итак, в предыдущих статьях мы успели рассмотреть 7 типов:

Селекторы тега, класса, Id, универсальный и атрибута
Селекторы псевдоклассов и псевдоэлементов

Из этих семи возможных видов в языке CSS можно составлять комбинации. Все комбинации, которые мы будем составлять, имеют непосредственное отношение к иерархии элементов Html кода (предки — потомки, родители — дети, братья — сестры).

Первый вид комбинации называется контекстный селектор. Он учитывает взаимоотношение элементов Html кода по принципу «Предок — Потомок»:

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

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

В приведенном коде только подчеркнутый фрагмент будет окрашен в зеленый цвет, т.к. в числе его предков имеется Div, а второй фрагмент кода, выделенный тегами B, останется того цвета, который выбран для него по умолчанию, ибо в числе его предков контейнера Div уже нет (только P и Body):

Такие комбинации работают в любых браузерах.

Следующим типом комбинаций будет дочерний селектор, который строится на принципах взаимоотношений элементов кода по типу «Родитель — Ребенок»:

Записываются они с разделяющим знаком больше (>):

Данная запись будет трактоваться браузером так: для абзацев (Html тег P), «родителем» (ближайшим предком) которых является контейнер Div, будет использоваться выделение красным цветом.

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

body > p {color:red}

То красным уже будет выделен только последний абзац, т.к. его родителем является тег Body, а два первых параграфа останутся того цвета, который был предусмотрен для них по умолчанию (Body для них предок, но не родитель, которым является Div). Дочерние селекторы не работают в браузере Ie 6.

Как и для чего группируют селекторы в CSS коде

Последняя комбинация называется соседние селекторы и отвечает принципам отношений между элементами Html кода по типу «Сестры — Братья». В качестве разделителя у них может использоваться либо «+», либо «~»:

Данная запись означает, что содержимое элемента I (выделение курсивом) будет окрашено в красный цвет только тогда, если его ближайшим соседом слева (сверху по коду) является элемент B (выделение жирным). Например, данное условие будет соблюдено в этом примере:

Если записать соседний селектор в Css коде в таком виде:

h2 ~ p {color:red}

То это будет означать, что все параграфы (P), у которых выше по коду расположен соседний элемент h2 (заголовок), будут окрашены в красный цвет. Имеются в виду именно соседние элементы (отношения вида «Сестры — Братья»). На приведенном ниже примере заданному селектору будут удовлетворять обведенные абзацы.

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

Селекторы в Css можно еще и группировать. Например, если у каких-то из них используется одно или несколько одинаковых правил, то их можно объединить в группу для уменьшения объема Css кода.

В приведенном на скриншоте примере, Css свойство «background:yellow» повторяется для каждого селектора заголовка (h2-3), что может вызвать сложности (многократная работа) при желании поменять значение этого свойства. Поэтому второй вариант сгруппированной записи выглядит немного предпочтительнее.

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

Приоритеты Css свойств (с important и без него)

Теперь давайте подумаем, а какое стилевое оформление будет использовать браузер, если никаких стилей для данного элемента Html кода не задано? А для этого существует соответствующая спецификация валидатора WC3, где все это описано.

Для этого на странице со спецификацией CSS нужно прокрутить текст до конца и перейти по ссылке «Default style sheet for HTML 4»:

Как вы можете видеть, сейчас произошло уже окончательное разделение Html и Css. Т.е. даже для чистого ХТМЛ кода браузер все равно будет использовать дефолтные свойства таблиц стилей. Так вот свойства, принятые по умолчанию, имеют самый низший приоритет.

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

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

Например, в Ie для этого нужно выбрать из верхнего правого меню «Сервис» — «Свойства обозревателя», а затем на первой вкладке «Общие» щелкнуть по нижней кнопке «Оформление». В открывшемся окне вам нужно поставить галочку в поле «Оформлять, используя пользовательский стиль», и с помощью кнопки «Обзор» найти на своем компьютере нужный вам файл стилевой разметки CSS:

Т.е. у пользователя есть возможность заставить любой открываемый в браузере сайт выглядеть в соответствии с его требованиями, описанными в файле CSS. Это называется «пользовательские стили» и они имеют приоритет выше, чем стили, которые определены в спецификации по умолчанию. Но еще больший приоритет будут иметь так называемые авторские стили.

Под авторскими стилями имеются в виду свойства, которые подключаются к Html документу любым из трех основных способов (тег или атрибут Style в Css, а также внешний файл с таблицами стилей).

Т.е., если я (разработчик сайта) захотел использовать в оформлении какого-либо элемента Html кода стили отличные от дефолтных (помните, они в спецификации описаны), то пользователь своим собственным файлом Css перебить мое оформление не сможет.

Пользователь будет вынужден смириться? Нет. Есть у него возможность повысить приоритет своих свойств CSS с помощью добавления Important в конце каждого из них. Пишется это слово через пробельный символ и перед ним ставится восклицательный знак:

p {color:red !important;}

Если у пользователя в его собственном файле стилей, который он подключил к браузеру, будет прописано это же свойство с Important, то все абзацы он будет видеть в красном цвете. Но ведь и автор (разработчик) сайта мог использовать Important для этого свойства. Кто же тогда победит и чей приоритет окажется выше?

Решили, что пользовательские стили с Important будут иметь по-любому более высокий приоритет, чем авторские стили, что с Important, что без него.

Давайте обобщим в виде списка всю изложенную информацию по поводу приоритетов стилевых свойств. Приоритет будет убывать сверху вниз:

Пользовательские с Important
Авторские с Important
Авторские
Пользовательские
Стили, принятые для Html элементов в спецификации по умолчанию (когда ни автор, ни пользователь ничего другого не задали)

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

Как повышают приоритеты Css свойств в авторских стилях

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

Именно сейчас мы с вами и переходим к вопросу каскадности таблиц стилей CSS. Давайте рассмотрим это на примере, чтобы было нагляднее. Допустим, что у нас имеется фрагмент кода со следующими Html элементами (параграф внутри контейнера Div):

<div>
 <p>Содержимое контейнера </p>
</div>

Давайте сначала пропишем такие свойства:

p {color:red}
.sbox {background:#f0f0f0}

В результате будет применено и первое из них к параграфу (ибо он образован тегом P), и свойство, задающее серый фон для элемента с классом «sbox», который опять же имеется у этого параграфа:

А теперь давайте добавим ко второму селектору (класса) еще одно свойство, которое будет конфликтовать с первой строчкой (в них обоих задается цвет для текста через color, но значения при этом используются разные):

p {color:red}
. sbox {background:#f0f0f0;color:blue}

В результате цвет текста параграфа станет синим вместо красного.

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

Кроме этого сами селекторы имеют градацию по приоритетам. Самый высокий приоритет у ID. В этом примере цвет текста будет синим именно потому, что приоритет Id (#out) будет выше, чем у селектора тега (p):

p {color:red}
#out {color:blue}

Дальше по лесенке приоритетов, направленной вниз, следуют селекторы классов, псевдоклассов и атрибутов. В следующем примере опять проиграет тег (p) и цвет текста абзаца будет синим, ибо тягается он с селектором более высокого приоритета (класса):

p {color:red}
.sbox {color:blue}

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

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

div p {color:red}
p {color:blue}

Какого цвета в результате получится текст параграфа? Правильно, именно красного, т.к. у этого свойства больше селекторов тегов (два против одного). О как. Т.е. сначала считаются Id. Если победитель не выявлен, то считаются классы, псевдоклассы и атрибуты. Ну, а если и там ничего не решилось или таких не было найдено, то считаются селекторы тегов и псевдоэлементов.

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

<div>
 <p>Содержимое контейнера </p>
</div>

Вполне можно будет написать такой кусок Css кода:

div.box #out{color:red}
#in p.sbox{color:blue}

И какого же цвета должен быть текст параграфа? Обе комбинации описывают именно наш параграф. Первую следует, как и водится, читать справа налево: применить данные свойства (color:red) для элемента с Id #out, который стоит где-то внутри (иметь его среди «предков») контейнера Div с классом .box (div.box). Полностью подходит к нашему абзацу.

Вторая комбинация: применить данные свойства (color:blue) для элемента параграфа с классом sbox (p.sbox), который стоит внутри любого элемента с Id #in. Опять же, она полностью описывает именно наш параграф. Давайте считать селекторы.

С ID в обоих комбинациях встречаются по одному разу, тоже самое можно сказать и о классах. Остается только посчитать селекторы тегов, но их тоже в обоих комбинациях используется одинаковое число раз (один). Засада.

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

Тут будет действовать правило — кто последний, тот и прав. Поэтому в моем примере цвет текста параграфа будет синим, ибо это свойство (color:blue) расположено ниже в коде. Если эти правила поменять местами:

#in p.sbox{color:blue}
div.box #out{color:red}

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

body #in p.sbox{color:blue}
div.box #out{color:red}

В этом случае цвет параграфа измениться на синий. Универсальный селектор «*» вообще никакого влияния на подсчет приоритетов не оказывает. Кстати, чуть выше мы рассмотрели способ повышения приоритета Css правил с помощью добавления Important. В нашем примере это может выглядеть так:

p {color:green !important}
#in p.sbox{color:blue}
div.box #out{color:red}

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

Но Important не является единственным способом безоговорочного повышения приоритета свойства. Второй способ повышения может заключаться в использовании стилевых свойств в атрибуте Style нужного вам Html элемента.

Т.е. прописываете внутри того же многострадального тега P атрибут Style с заданием любого цвета:

<div>
 <p>Содержимое контейнера </p>
</div>

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

Но вот свойства с Important он перебить не сможет. Т.е. в последнем примере, где мы добавили правило «p {color:green !important}», цвет текста по-прежнему будет зеленым, даже несмотря на.

На самом деле приоритет двух правил (с Important во внешнем файле таблицы стилей и в атрибуте style) равный, а значит нужно переходить к подсчету селекторов. А разве они могут быть внутри атрибута style?

Да никаких не может быть, а это значит, что правило, прописанное в атрибуте style, всегда проиграет правилу с Important только за счет меньшего числа селекторов (ноль будет меньше любого числа).

Ну, а что же тогда даст наибольший приоритет Css свойству? Правильно, его оно будет прописано в атрибуте style да еще с Important:

<head>
<style>
p {color:green !important}
#in p.sbox{color:blue}
div.box #out{color:red}
</style>
</head>
<body>
<div>
 <p>Содержимое контейнера </p>
</div>
</body>

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

Итак, давайте попробует составить список факторов, влияющих на приоритет свойства в авторских стилях по мере их убывания:

Прописывание свойства в атрибуте style нужного тега вместе с Important
Добавление Important к свойству во внешнем файле таблиц стилей или же в теге style прямо в Html коде
Простое прописывание этого свойства в атрибуте style нужно элемента
Использование бОльшего числа Id для данного свойства
Использование большего числа селекторов классов, псевдоклассов или атрибутов
Использование большего числа селекторов тегов и псевдоэлементов
Более низкое расположение свойства в Css коде, при прочих равных условиях

На самом деле правила в атрибуте style при верстке используются крайне редко (представьте себе, как трудно будет в этом случае вносить изменения во всем коде сайта, а не в отдельном файле CSS).

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

А зачем и как вставлять свой код на чужие страницы? Нам может и незачем, а Яндекс и Гугл это делают, когда размещают объявления РСЯ или рекламу Гугл Адсенса на чужих площадках (наших с вами сайтах).

Добавив во все элементы кода рекламных блоков атрибут style, с прописанными в нем свойствами и добавленным Important, можно уже не беспокоиться о том, что код объявлений будет изменен каким-либо образом (хотя объявления Яндекса все же можно менять за счет CSS и Important, видимо они не использовали этот метод).

На этом изучение селекторов можно считать законченным, в следующей статье мы уже начнем разбирать Css правила.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Взвешиваем селекторы CSS / Хабр

Ближе к двум часам ночи в голову в месте с мыслями о вечном приходят не менее вечные вопросы — «в чём смысл жизни ?», «зачем вообще человеку спать ?» или «Какого чёрта эта #%^$ не работает ?» и чем ближе утро, тем сильнее начинает волновать именно этот самый последний вопрос.

Чуть ниже я расскажу о том какого чёрта сss селекторы иногда не ведут себя так, как нам кажется правильным, и о том как они на самом деле должны себя вести.

Глава один – идём направо!

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

Итак, взвешиваем — сначала представим пару рядов из 8 чисел:

0,1,0,0,0,0,0,0

1,0,0,0,0,0,0,0

Знакомьтесь — так в числах выглядят некоторые два селектора, чтобы никто ни о чем не догадался назову их условно «верхний» и «нижний»

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

Смотрим на крайние левые числа

Выбираем из них большее. — именно этот селектор и будет самым тяжелым

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

Если все числа одинаковые то применяются стили из селектора который был объявлен последним

Самая страшная тайна

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

Раскрывая самую страшную тайну я расскажу, как собственно превратить обычный селектор в такие понятные и красивые цифры? Всё как всегда очень просто:

Теги. за каждый тег в селекторе можно накинуть в самое правое число единичку:
```
a – это 0,0,0,0,0,0,0,1
div a – это  0,0,0,0,0,0,0,2
```

Классы, за каждый класс или псевдокласс в селекторе можно накинуть по единичке во второе число справа
```
.head .logo – это  0,0,0,0,0,0,2,0
.logo.big  –    0,0,0,0,0,0,2,0
div:first-child – 0,0,0,0,0,0,1,1
.logog > .big – и это тоже 0,0,0,0,0,0,2,0
```
Да, вы все верно поняли. Css селектор плевать хотел на все эти ваши изыски типа пробелов или «>».

За каждый ID в селекторе добавляем по единичке в третье справа число.
```
#head – это  0,0,0,0,0,1,0,0
#head  #logo –  тоже  0,0,0,0,0,2,0,0
```

Я думаю суть вы уловили, теперь можно приступать к небольшой викторине, чтобы это проверить:

Викторина

<head>
    <title></title>
    <style>
        span p
        {
            background-color: gray;
        }
        html p
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span><p>?</p></span>
    </div>
</body>

Вопрос: Какого цвета бэкграунд будет в абзаце?
Ответ: Правильно, красного, потому что селектор не волнует что вам там кажется, и расстояние между тэгами его не интересует. А так как вес тэгов равен – применится последний.

<head>
    <title></title>
    <style>
        div.test1
        {
            background-color: gray;
        }
        div > . test1
        {
            background-color: yellow;
        }
        
        div .test1
        {
            background-color: red
        }
    </style>
</head>
<body>
<div>
    <div>?</div>
</div>
</body>

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

<head>
    <title></title>
    <style>
        #id1 div
        {
            background-color: gray;
        }

        #id2
        {
            background-color: red
        }
    </style>
</head>
<body>
<div>
    <div>?</div>
</div>
</body>

Вопрос: Все тот же.
Ответ: А ответ, для разнообразия другой: наш див будет серым. Потому что как я уже упоминал выше селектору абсолютно безразлично что вы там имели ввиду. У первого селектора вес больше, и никого не волнует что скорее всего ожидали вы не такого поведения.

Продолжаем раскрывать секреты

У нас осталось еще так много чисел, и наверняка так хочется узнать что же все они значат – продолжаем раскрывать секреты.

Селектор * абсолютно невесомый, то есть совсем.

Селектор атрибутов это самый обычный псевдокласс и весит он столько же сколько и обычные классы

Любой инлайновый стиль написанный в атрибуте style=”” элемента автоматически получает приоритет0,0,0,0,1,0,0,0, что сразу делает его очень крутым.

А следующие четыре цифры это все наши старые знакомые только с атрибутом !important

div
{
    background-color: gray !important;
}

Имеет вес при определении свойства background-color -  0,0,0,1,0,0,0,0

.header 
{
    background-color: gray !important;
}

0,0,1,0,0,0,0,0

Все мы любим викторины

<head>
    <title></title>
    <style>
    a. ="#"] 
    {
        color: red;
    }
    </style>
</head>
<body>
<a href="#">?</a>
</div>
</body>

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

<head>
    <title></title>
    <style>
        #id1
        {
            background-color: gray !important;
        }
    </style>
</head>
<body>
<div>?</div>
</body>

Вопрос: Мой оригинальный запатентованный вопрос.
Ответ: !important круче всего, даже круче чем инлайн стили – так что бам-бам-бам – серого!

Исходники всех тестов лежат тут

P.S. немного порно

<head>
    <title></title>
    <style>
        #id1
        {
            background-color: gray !important;
        }
    </style>
</head>
<body>
<div>red</div>
</body>

html — Приоритет частей селекторов CSS

В математике порядок операций дает общее представление о том, какие операции имеют приоритет, и содержит круглые скобки как способ переопределить этот порядок. Например, x + y * z = x + (y * z), но x + y * z != (x + y) * z.

Есть ли способ добиться этого эффекта в CSS? Какие селекторы имеют приоритет, и как я могу заставить приоритеты иметь низкоприоритетные?

BoxTechy

9 Авг 2017 в 00:54

2 ответа

Лучший ответ

То, что вы ищете, называется Специфичность . Связанная статья очень хорошо это объясняет.

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

Однако это больше, чем просто наличие нескольких имен классов. Как вы понимаете, разные типы селекторов имеют разные уровни приоритета. Например, селекторы ID считаются чрезвычайно специфичными, поскольку только один элемент может (ну, должен) иметь данный ID. В общем, этот порядок выглядит следующим образом, от наиболее точного до наименее значимого:

Встроенные стили> Селекторы идентификаторов> Селекторы классов, атрибутов и псевдоклассов> Элементы и псевдоэлементы

Обязательно прочтите статью для получения дополнительной информации.

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

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

Auroratide
8 Авг 2017 в 22:03

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

section { background-color: red; }

section.header { background-color: green; }

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

Другие соображения будут заключаться в том, как вы втягиваете свои таблицы стилей css (встроенные, встроенные и внешние).

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

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

Подробнее здесь: Каков порядок приоритета для CSS?

eulloa
8 Авг 2017 в 22:02

Приоритеты и наследование в CSS

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

А одной из основных ее частей является такая неконтролируемая вещь, как поведенческие факторы. Напрямую на них повлиять нельзя (накрутку сразу отметаем, т.к. можно схлопотать фильтр от поисковиков), а вот косвенно — пожалуйста. Улучшайте дизайн сайта, добавляйте всякие интересные штуки, социализируйте сайт (кнопки, опросы) — эти действия и могут повлиять на пользователей.

Как я уже сказал в статье об основах CSS, он создан для того чтобы оптимизировать весь дизайн сайта (точнее описание внешнего вида сайта). Без языка стилей нам бы пришлось прописывать все элементы внешнего вида в html-тегах. Во-первых это все делать крайне не удобно — представьте, в каждый элемент, внешний вид которого вы хотите изменить, придется прописывать еще несколько тегов и атрибутов. Долго и нудно, если честно.

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

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

Предки, потомки и сестринские элементы в HTML

Наверное, пора уже перейти к основной теме статьи. Немногим ранее мы рассмотрели виды css селекторов, а также правила их написания и примеры. И в той же статье я затронул тему приоритетов селекторов. Но сейчас немного общей информации. Как вы уже знаете из темы html тегов, в коде страницы все элементы делятся на предков и потомков. Оба понятия применяются относительно какого-либо тега. Итак, открыв исходный код какой-либо страницы, вы можете увидеть примерно следующее (в качестве примера я взял свой блог):

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

Итак, возьмем в качестве исследуемого объекта тег

<span>

. Его предком будет этот тег:

<a href="http://monetavinternete.ru/">MonetaVInternete.ru </a>

А потомком вот этот:

<div>

И остается еще несколько элементов. которые называются сестринскими:

<div>
<div>

Иными словами, элемент, который находится внутри другого, является его потомком. Можно представить код в одну строку:

<div> <span><a href="http://monetavinternete.ru/">MonetaVInternete.ru </a></span></div>

Думаю, с этим все понятно. Перейдем к приоритетам в CSS.

Приоритеты и наследование в CSS

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

Самым низким приоритетом обладают стили, которые прописаны в самом браузере. В файлах каждого интернет-обозревателя находится информация о стандартных css-стилях. В старых браузерах есть возможность загрузить свой css-файл или изменить стандартные стили.
Следующим по значимости идет авторский стиль — все элементы, которые прописаны в коде страницы. Это и подключенный файл и селекторы в атрибуте style. Данный пункт является обобщающим для всех последующих, т.к. все они задаются автором сайта…
Стили, унаследованные элементом от потомков. Вернемся к материалу выше (не зря же я его писал). Если к тегу <div> применены какие-либо стили, то они же будут действовать для тега <span>.
Далее идут стили, прописанные во внешнем подключенном файле. В данном случае, все селекторы, примененные к потомкам не имеют силы.
Более высоким приоритетом обладают стили, которые прописываются в теге <style> в начале HTML документа. Но тут возникает проблема: зачастую, к одному и тому же элементу применяются стили, прописанные в различных селекторах. В таком случае применяется правило расчета специфичности каждого селектора по такому принципу:
- Количество идентификаторов (#id) в селекторе — (1,0,0) за каждый.
- Количество классов (.class) и псевдоклассов (:pseudoclass) — (0,1,0) за каждый.
- Количество тегов и псевдоэлементов (::pseudo-element) — (0,0,1) за каждый.
Итак, как вы понимаете, приоритет рассчитывается в зависимости от количества «очков». Учтите, что (1,0,0) больше чем (0,2,10).
В большем приоритете будут стили, прописанные прямо в теге, с помощью атрибута style.
И, наконец, высшим приоритетом обладают стили, в которых содержится слово !important. Но есть небольшое исключение — если такие стили объявлены и автором и пользователем, то будут применены только пользовательские.

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

 p {
color:red;
font-family: Garamond, serif;
background: white;
color:blue;
}

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

Думаю, с основами CSS можно закончить. В следующих статьях я буду описывать сами селекторы и их функции. До скорых встреч на страницах блога MonetaVInternete.ru!

Учебник CSS 3. Статья «Каскадность в CSS»

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

Прежде всего, что такое каскадность? Каскадность – это правила, по которым определяется какие стилевые свойства задаются браузером элементам на странице (последовательность применения стилей к определённым элементам и разрешение при необходимости, возникающих конфликтов).

Давайте рассмотрим следующее изображение, на нем отображены основные источники информации о стилях, которые образуют каскад:

Рис. 30 Основные источники информации о стилях.

К основным источникам информации о стилях относятся:

Встроенные стили браузера по умолчанию.
Стили, заданные автором документа, их в свою очередь можно указать в трех местах:
- Внешний CSS файл (с использованием элемента <link>, который размещается внутри элемента <head>).
- В теле документа (в настоящее время разрешается размещать стили только в начале документа — стили помещаются внутри парного тега <style>, который в свою очередь должен находиться внутри элемента <head>).
- Внутри элемента (стили, которые задаются с использованием глобального HTML атрибута style).
Стили, заданные пользователем (в некоторых современных браузерах возможность определить свои стили для конкретного сайта доступна встроенными средствами в настройках, для других требуется расширение для браузера). Это позволит стилизовать какой-то сайт по своему усмотрению и вкусу, или убрать с него какие-то блоки, которые Вам не хотелось бы видеть.

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

Главное надо понять, что если на странице применяется несколько стилей к одному элементу, то браузер объединит свойства этих стилей, при условии, что они не конфликтуют между собой (имеют различные значения для однотипных свойств). А если конфликтуют?

Давайте перейдем к практической части.

Предположим, что у нас есть абзац (элемент <p>), в котором указана определенная гиперссылка (элемент <a>). HTML код может выглядеть следующим образом:

<p class = "main"> Для перехода к основной статье нажмите <a href = "#"> вот на это место. </a></p>

На нашу страницу добавим следующие стили:

a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}

Создадим разметку и добавим стили в наш документ:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Каскадность в CSS</title>
<style>
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
}
. main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
	<body>
		<p class = "main">Для перехода к основной статье нажмите <a href = "#"> вот на это место. </a></p>
	</body>
</html>

Результат нашего примера:

Рис. 30а Каскадность в CSS.

Давайте рассмотрим какие стили были применены к элементу <a>:

Рис. 30б Применение стилей к элементу.

В данном примере вы можете увидеть, что все три наших селектора с различными стилями были применены к элементу <a>, а встроенные стили элемента — цвет и декорирование текста (нижнее подчеркивание) были заменены на авторские стили (стили автора документа) по той причине, что они имеют больший приоритет.

Система приоритетов в CSS

Давайте рассмотрим пример, где не всё так очевидно и однозначно. К примеру, с использованием свойства font-family зададим элементу <a> различный тип шрифта с использованием аналогичных селекторов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Конфликты стилей в CSS</title>
<style>
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
font-family: Arial; /* устанавливаем тип шрифта Arial */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
font-family: Helvetica; /* устанавливаем тип шрифта Helvetica */
}
. main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
font-family: Courier; /* устанавливаем тип шрифта Courier */
}
</style>
</head>
	<body>
		<p class = "main">Для перехода к основной статье нажмите <a href = "#"> вот на это место. </a></p>
	</body>
</html>

Результат нашего примера:

Рис. 31 Пример конфликтования стилей.

Давайте рассмотрим какой шрифт получил элемент <a>:

Рис. 31a Выбор типа шрифта при конфликте стилей.

Обратите внимание, что для нашего элемента был установлен шрифт Courier.
Как мы видим в «инструментах разрабочика» браузера Chrome этот шрифт выбран из селектора потомков в котором используется как селектор класса, так и селектор типа (.main a), а в остальных селекторах тип шрифта для элемента перечеркнут. Но почему?

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

Селектор типа, псевдоэлементы — 1 пункт.
Селектор класса, псевдоклассы — 10 пунктов.
Id селектор — 100 пунктов.
Встроенный (inline) стиль (стиль задается в самом элементе с использованием глобального HTML атрибута style) — 1000 пунктов.

Давайте перейдем к следующему примеру в котором рассмотрим как работает система приоритетов:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Работа системы приоритетов в CSS</title>
<style>
#id_invite { /* id селектор — 100 пунктов */
color: red; /* устанавливаем цвет текста красный */
}
.class_invite { /* селектор класса — 10 пунктов */
color: blue; /* устанавливаем цвет текста синий */
}
p { /* селектор типа — 1 пункт */
color: green; /* устанавливаем цвет текста зеленый */
}
</style>
</head>
	<body>
		<!-- устанавливаем цвет текста внутри элемента span зеленый (inline стиль) -->
		<p class = "class_invite" id = "id_invite">Просто <span style = "color: green;">добавь</span> воды.</p>
	</body>
</html>

В данном примере для элемента <p> был установлен красный цвет текста благодаря id селектору, который имеет более высокое значение в пунтах чем другие селекторы (100).
Кроме того, для демонстрации системы приоритетов мы применили встроенный (inline) стиль для элемента <span> и установили для него зеленый цвет шрифта. Обратите внимание, что на изображении, все значения селекторов перечеркнуты, так как встроенный стиль имеет самое высокое значение в пунктах (1000).

Рис 32 Пример системы приоритетов в CSS.

Чтобы подсчитать специфичность комбинированных селекторов необходимо их просто сложить между собой, например:

#id_invite a { /* id селектор (100 пунктов) + селектор типа (1 пункт) = 101 пункт  */
блок объявлений;
}
p:first-letter { /* селектор типа (1 пункт) + псевдоэлемент (1 пункт) = 2 пункта  */
блок объявлений;
}
.main:first-child { /* селектор класса (10 пунктов) + псевдокласс (10 пунктов) = 20 пунктов  */
блок объявлений;
}

Отмена значимости стилей

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

В CSS предусмотрена возможность отменить значимость стилей (не учитывать количество пунктов). Для этого необходимо добавить к значению CSS свойства ключевое слово !important.

Давайте рассмотрим пример использования ключевого слова !important:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример отмены значимости стилей</title>
<style>
a.rtfm { /* селектор типа (1 пункт) + селектор класса (10 пунков) = 11 пунктов  */
color: green; /* устанавливаем цвет текста зеленый */
}
a { /* селектор типа (1 пункт)  */
color: red !important; /* отменяем значимость стилей и устанавливаем цвет текста красный */
}
</style>
</head>
	<body>
		<a class =  "rtfm"  href =  "http://google.com">Найти</a>
	</body>
</html>

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

Результат нашего примера:

Рис. 33 Пример отмены значимости стилей.

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

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

Сброс и нормализация встроенных стилей.

Ещё один необходимый метод для грамотного построения кроссбраузерных страниц — это необходимость сброса встроенных в браузер внутренних стилей (сброс стандартных стилей браузера). Другими словами, независимо какой браузер у пользователей, которые посещают Ваш сайт, отображение должно быть в одном стиле — с одинаковыми отступами, границами и форматированием.

Для этого существуют различные шаблоны, которые сбрасывают внутренние стили (reset.css). Как правило, шаблоны адаптируются под себя (под Ваши нужды) и служат для удаления полей и отступов, устанавливая например 100% размер шрифта, убирая выделения полужирным шрифтом, устанавливают пространство между строками в абзаце, убирают маркеры в списках и тому подобное.

В настоящее время часто в своей работе используют альтернативу традиционному reset.css (сбросу внутренних стилей), нормализовывая таблицы стилей — normalize.css.

Данный проект (normalize.css) появился после глубокого исследования различий между изначальными стилями браузера под руководством Николаса Галахера.
Основные задачи normalize.css заключаются в том, чтобы сохранить полезные настройки браузера, а не стирать их, и при этом нормализовать стили для широкого круга HTML элементов.

Как вы понимаете, normalize.css значительно отличается от reset.css. Впоследствии, я Вам рекомендую попробовать в своей работе оба метода, чтобы определиться, соответствует ли конкретный метод вашим предпочтениям в разработке.

Пример CSS reset — http://meyerweb.com/eric/tools/css/reset/
Проект normalize css — https://necolas.github.io/normalize.css/

Вопросы и задачи по теме

Перед тем как перейти к следующей статье ответьте на следующие вопросы:

подсчитайте специфичность комбинированного селектора:

.main a { 
блок объявлений;
}

Показать ответ

.main a { /* селектор класса (10 пунктов) + селектор типа (1 пункт) = 11 пунктов  */
блок объявлений;
}

подсчитайте специфичность комбинированного селектора:

#main #section { 
блок объявлений;
}

Показать ответ

#main #section { /* id селектор (100 пунктов) + id селектор (100 пунктов) = 200 пунктов  */
блок объявлений;
}

подсчитайте специфичность комбинированного селектора:

table.header tr:hover { 
блок объявлений;
}

Показать ответ

table.header tr:hover { /* селектор типа (1 пункт) + селектор класса (10 пунктов) + селектор типа (1 пункт) + псевдокласс (10 пунктов) = 22 пункта  */
блок объявлений;
}

Специфика

— CSS: каскадные таблицы стилей

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

Специфичность — это вес, который применяется к данному объявлению CSS, определяемый количеством каждого типа селектора в соответствующем селекторе. Когда несколько объявлений имеют одинаковую специфичность, к элементу применяется последнее объявление, найденное в CSS.Специфичность применяется только в том случае, если один и тот же элемент является целью нескольких объявлений. Согласно правилам CSS, элементы с прямым нацеливанием всегда будут иметь приоритет над правилами, которые элемент наследует от своего предка.

Типы селекторов

Следующий список типов селекторов увеличивается в зависимости от специфичности:

Селекторы типа (например, h2 ) и псевдоэлементы (например, :: до ).
Селекторы классов (например, . Пример ), селекторы атрибутов (например, .g., [type = "radio"] ) и псевдоклассы (например, : hover ).

Селекторы идентификаторов

(например, #example ).

Универсальный селектор ( * ), комбинаторы ( + , > , ~ , ' ', || ) и псевдокласс отрицания (: not () ) не действуют по специфике. (Селекторы объявили внутри : не () , однако.)

Для получения дополнительной информации посетите: «Специфика» в «Каскад и наследование», вы также можете посетить: https: // specificishity.com

Встроенные стили, добавленные к элементу (например, style = "font-weight: bold;" ), всегда перезаписывают любые стили во внешних таблицах стилей и, таким образом, могут считаться имеющими наивысшую специфичность.

`Исключение! Important`

Когда правило important используется в объявлении стиля, это объявление отменяет любые другие объявления. Хотя технически ! Important не имеет ничего общего со спецификой, он напрямую с ней взаимодействует. Использование ! Important, , однако, является плохой практикой , и его следует избегать, поскольку это затрудняет отладку, нарушая естественный каскад в ваших таблицах стилей.Когда два конфликтующих объявления с правилом ! Important применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью.

Некоторые практические правила:

Всегда ищите способ использовать специфичность, прежде чем даже рассматривать ! Важно
Только используют ! Important в CSS для конкретной страницы, который переопределяет сторонний CSS (из внешних библиотек, таких как Bootstrap или normalize.css).
Никогда используйте ! Important при написании плагина / мэшапа.
Никогда использовать ! Important в CSS всего сайта.

Вместо использования ! Important рассмотрите:

Лучше использовать каскад CSS
Используйте более конкретные правила. Если указать один или несколько элементов перед выбранным элементом, правило становится более конкретным и получает более высокий приоритет:
```
  
   Текст 

  
```
```
  div # test span {цвет: зеленый; }
div span {цвет: синий; }
span {цвет: красный; }  
```
Независимо от порядка текст будет зеленым, потому что это правило является наиболее конкретным.(Кроме того, правило для синего заменяет правило для красного, независимо от порядка правил)
Как бессмысленный частный случай для (2), продублируйте простые селекторы для повышения специфичности, когда вам больше нечего указывать. # myId # myId span {цвет: желтый; } .myClass.myClass span {цвет: оранжевый; }

`Как! Important можно использовать:`

`A) Переопределение встроенных стилей`

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

В этом случае вы можете установить определенные стили в глобальном файле CSS как! Important, тем самым переопределив встроенные стили, установленные непосредственно для элементов.

   Какого я цвета?

  .foo [style * = "color: red"] {
  цвет: огнеупорный кирпич! важно;
}

Многие фреймворки и библиотеки JavaScript добавляют встроенные стили.Использование ! Important с очень целевым селектором - один из способов переопределить эти встроенные стили.

`B) Преодоление высокой специфичности`

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

p.awesome {
  красный цвет;
}

Как сделать так, чтобы абзацы классно всегда становились красными, даже если они находятся внутри #someElement ? Без ! Important первое правило будет более конкретным и будет преобладать над вторым правилом.

`Как отменить`

! Important

A) Добавьте еще одно правило CSS с ! Important и либо придайте селектору более высокую специфичность (добавив тег, идентификатор или класс к селектору), либо добавьте правило CSS с тем же селектором в более поздний момент, чем существующий один.Это работает, потому что в зависимости от специфики побеждает последнее определенное правило.

Некоторые примеры с более высокой специфичностью:

  таблица td {height: 50px! Important; }
.myTable td {height: 50px! important; }
#myTable td {height: 50px! important; }

B) Или добавьте такой же селектор после существующего:

  td {height: 50px! Important; }

C) Или, желательно, переписать исходное правило, чтобы вообще не использовать ! Important .

  [id = "someElement"] p {
  цвет синий;
}

p.awesome {
  красный цвет;
}

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

`Для получения дополнительной информации посетите:`

`Исключения: is () и: not ()`

Псевдокласс match-any : is () и псевдокласс отрицания : not () - это , а не , которые считаются псевдоклассом в расчет специфичности.Но селекторы, помещенные в псевдокласс, считаются обычными селекторами при определении количества типов селекторов.

Этот фрагмент CSS ...

  div.outer p {
  оранжевый цвет;
}

div: not (.outer) p {
  цвет: сине-фиолетовый;
}

... при использовании со следующим HTML ...

  
   Это во внешнем div. 
  
     Этот текст находится во внутреннем div.

... появляется на экране так:

`Исключение: where ()`

Псевдокласс настройки специфичности : where () всегда заменяет специфичность нулем.

Этот фрагмент CSS ...

  div: где (.outer) p {
  оранжевый цвет;
}

div p {
  цвет: сине-фиолетовый;
}

... при использовании со следующим HTML ...

  
   Это во внешнем div. 
  
     Этот текст находится во внутреннем div.

... появляется на экране так:

`Специфичность на основе формы`

Специфичность основана на форме селектора. В следующем случае селектор * [id = "foo"] считается селектором атрибутов с целью определения специфичности селектора, даже если он выбирает идентификатор.

Следующие стили CSS ...

  * # foo {
  цвет: зеленый;
}

* [id = "foo"] {
  цвет: фиолетовый;
}

... при использовании с этой разметкой ...

   Я образец текста

... в итоге получится так:

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

`Игнорирование близости дерева`

Близость элемента к другим элементам, на которые имеется ссылка в данном селекторе, не влияет на специфичность. Следующее объявление стиля ...

  корпус h2 {
  цвет: зеленый;
}

html h2 {
  цвет: фиолетовый;
}

... со следующим HTML ...

  
  
     Вот название!

... будет отображаться как

Это связано с тем, что два объявления имеют равное количество типов селектора, но селектор html h2 объявляется последним.

`Элементы с прямым нацеливанием и унаследованные стили`

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

  #parent {
  цвет: зеленый;
}

h2 {
  цвет: фиолетовый;
}

... со следующим HTML ...

  
  
     Вот название!

... также будет отображаться как

Это связано с тем, что селектор h2 нацелен конкретно на элемент, а зеленый селектор наследуется только от своего родителя.

Калькулятор специфичности: интерактивный веб-сайт для тестирования и понимания ваших собственных правил CSS - https: // специфичность.keegan.st/
Специфика селекторов CSS3 - http://www.w3.org/TR/selectors/#specificity
Ключевые концепции CSS: Синтаксис CSS, по правилу Комментарии, специфичность и наследование, коробка, режимы компоновки и модели визуального форматирования, и падение маржи, или начальный, вычислено, решено, указано, использовал, и фактические значения. Определения синтаксиса значений, сокращенные свойства и заменил элементы.

`Введение в каскад CSS - CSS: каскадные таблицы стилей`

Каскад - это алгоритм, который определяет, как комбинировать значения свойств, происходящие из разных источников.Он лежит в основе CSS, как подчеркивается в названии: Cascading Style Sheets. В этой статье объясняется, что такое каскад, порядок, в котором каскадируются объявления CSS, и как это влияет на вас, веб-разработчика.

В каскаде участвуют только объявления CSS, то есть пары свойство / значение. Это означает, что at-правила, содержащие объекты, отличные от объявлений, такие как правило @ font-face , содержащее дескрипторов , не участвуют в каскаде.В этих случаях только at-правило в целом участвует в каскаде: здесь @ font-face идентифицируется его дескриптором font-family . Если определены несколько правил @ font-face с одним и тем же дескриптором, рассматривается только наиболее подходящий @ font-face в целом.

В то время как объявления, содержащиеся в большинстве правил at-правил, например, в @media , @document или @supports , участвуют в каскаде, объявления, содержащиеся в @keyframes , не участвуют.Как и в случае с @ font-face , с помощью каскадного алгоритма выбирается только at-правило в целом.

Наконец, обратите внимание, что @import и @charset подчиняются определенным алгоритмам и на них не влияет каскадный алгоритм.

Задача каскадного алгоритма CSS - выбрать объявления CSS для определения правильных значений свойств CSS. Декларации CSS происходят из разных источников: таблиц стилей User-agent , таблиц стилей Author и таблиц стилей пользователя .

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

`Таблицы стилей агента пользователя`

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

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

`Авторские таблицы стилей`

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

`Пользовательские таблицы стилей`

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

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

Сначала он фильтрует все правила из разных источников, чтобы сохранить только те правила, которые применяются к данному элементу. Это означает правила, селектор которых соответствует данному элементу и которые являются частью соответствующего правила media at-rule.

 Затем он сортирует эти правила по их важности, то есть соблюдаются ли они ! Important  и по их происхождению. Каскад находится в порядке возрастания, что означает, что значения ! Important  из пользовательской таблицы стилей имеют приоритет над обычными значениями, полученными из таблицы стилей пользовательского агента:
 Происхождение  Важность
 1  агент пользователя  нормальный
 2  пользователь  нормальный
 3  автор  нормальный
 4  анимации 
 5  автор  ! Важный 
 6  пользователь  ! Важный 
 7  агент пользователя  ! Важный 
 8  переходы

В случае равенства считается, что специфичность значения выбирает то или иное.

	Происхождение	Важность
1	агент пользователя	нормальный
2	пользователь	нормальный
3	автор	нормальный
4	анимации
5	автор	`! Важный`
6	пользователь	`! Важный`
7	агент пользователя	`! Важный`
8	переходы

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

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

CSS-анимации, использующие @keyframes at-rules, определяют анимацию между состояниями. Ключевые кадры не каскадируются, что означает, что в любой момент времени CSS принимает значения только из одного единственного @keyframes и никогда не смешивает несколько.

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

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

Пользовательский агент CSS:

Автор CSS 1:

Автор CSS 2:

  @media screen {
  li {margin-left: 3px}
}

@media print {
  li {margin-left: 1px}
}

Пользователь CSS:

 .конкретный {margin-left: 1em}

HTML:

  
  1^st 
  2^nd

В этом случае должны применяться объявления внутри li и . Специальные правила . Никакая декларация не помечена как ! Important , поэтому порядок приоритета - таблицы стилей автора перед таблицами стилей пользователя или таблицей стилей агента пользователя.

Итак, в конкурсе три объявления:

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

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

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

`Уровни приоритета селекторов в CSS`

`Введение`

В этой статье объясняется, что такое уровни приоритета CSS.

Уровень приоритета CSS

Уровень приоритета CSS в основном определяет приоритет стилей CSS, которые CSS применяет к определенному элементу на следующих трех уровнях.

Встроенные стили
Встроенные стили
Внешние стили

Встроенные стили

Встроенные стили имеют наивысший приоритет над внешним стилем и внешними стилями.Встроенные стили имеют приоритет над встроенными стилями и внешними стилями. Встроенные стили применяются непосредственно к элементу через атрибут стиля.

Код встроенного стиля

Моя HTML-страница
Лучшая компания
- CSharpCorner
- Norton India
- DebugCoder
- Решение MCN

Приоритет css селекторов: Приоритетность селекторов в CSS (специфичность селекторов, selector’s specificity)

Приоритетность селекторов в CSS (специфичность селекторов, selector’s specificity)

Введение в использование CSS селекторов

Правила специфичности

Пример специфичности — правило №1:

Правило №2:

Правило №3:

Вернемся к первому примеру этой статьи — правило №4:

Каскадность в CSS — Основы современной вёрстки

Приоритет селекторов

Переопределение свойств

Дополнительное задание

Остались вопросы? Задайте их в разделе «Обсуждение»

Нашли опечатку или неточность?

Что-то не получается или материал кажется сложным?

Об обучении на Хекслете

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

Комбинации и группировка селекторов в CSS

Как и для чего группируют селекторы в CSS коде

Приоритеты Css свойств (с important и без него)

Как повышают приоритеты Css свойств в авторских стилях

Взвешиваем селекторы CSS / Хабр

Глава один – идём направо!

Самая страшная тайна

Викторина

Продолжаем раскрывать секреты

Все мы любим викторины

html — Приоритет частей селекторов CSS

2 ответа

Приоритеты и наследование в CSS

Предки, потомки и сестринские элементы в HTML

Приоритеты и наследование в CSS

Учебник CSS 3. Статья «Каскадность в CSS»

Система приоритетов в CSS

Отмена значимости стилей

Сброс и нормализация встроенных стилей.

Вопросы и задачи по теме

— CSS: каскадные таблицы стилей

Типы селекторов

Исключение! Important

Как! Important можно использовать:

A) Переопределение встроенных стилей

B) Преодоление высокой специфичности

Как отменить

Для получения дополнительной информации посетите:

Исключения: is () и: not ()

Исключение: where ()

Специфичность на основе формы

Игнорирование близости дерева

Вот название!

Элементы с прямым нацеливанием и унаследованные стили

Вот название!

Введение в каскад CSS - CSS: каскадные таблицы стилей

Таблицы стилей агента пользователя

Авторские таблицы стилей

Пользовательские таблицы стилей

Уровни приоритета селекторов в CSS

Введение

Лучшая компания

Лучшая компания

Лучшая компания

Уровень приоритета CSS селекторов

Сводка

Приоритет стилей - CSS | CodeGuage.com

Расположение стилей

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

Определение специфичности

Введение в порядок и приоритет CSS

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

##! Важное исключение

Важность каскада

Наследование CSS, каскад и специфичность

Наследование

Унаследованные стили

Стили, не унаследованные

Ссылка на наследование, страница

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

Расчет уровня специфичности

Каскад

Что происходит при возникновении конфликтов?

`Исключение! Important`

`Как! Important можно использовать:`

`A) Переопределение встроенных стилей`

`B) Преодоление высокой специфичности`

`Как отменить`

`Для получения дополнительной информации посетите:`

`Исключения: is () и: not ()`

`Исключение: where ()`

`Специфичность на основе формы`

`Игнорирование близости дерева`

`Элементы с прямым нацеливанием и унаследованные стили`

`Введение в каскад CSS - CSS: каскадные таблицы стилей`

`Таблицы стилей агента пользователя`

`Авторские таблицы стилей`

`Пользовательские таблицы стилей`

`Уровни приоритета селекторов в CSS`

`Введение`

`Лучшая компания`

`Лучшая компания`

`Лучшая компания`

`Уровень приоритета CSS селекторов`

`Сводка`

`Приоритет стилей - CSS | CodeGuage.com`

`Расположение стилей`

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

`Определение специфичности`