Приоритеты css: Приоритет стилей | CSS | CodeBasics

Приоритет стилей | CSS | CodeBasics

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

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

• Стили в атрибуте тега
• Стили в отдельном файле
• Стили по умолчанию, которые добавляет браузер

Значения, указанные в атрибуте style будут важнее свойств в теге <style>, а они будут важнее стандартных стилей браузера.

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

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

Разберём на примере. Создадим параграф с классом red и идентификатором blue

<p>Текст с классом red и идентификатором blue</p>

Добавим противоречащие друг другу стили для класса, идентификатора и тега:

p {
  color: black;
}
. red {
  color: red;
}
#blue {
  color: blue;
}

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

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

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

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

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

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

<p>Параграф</p>

.paragraph.color-primary {
  color: blue;
}

Здесь использовался селектор из двух классов сразу. Это означает, что стили будет применяться только для элемента, у которого есть оба класса. Такое разделение помогает разработчикам точечно устанавливать стили для схожих элементов. Например:

<p>Параграф</p>
<p>Параграф</p>
<p>Параграф</p>

.paragraph {
  color: red;
}
.paragraph.color-primary {
  color: blue;
}

В этом примере все параграфы с классом paragraph будут иметь красный цвет текста, но если дополнительно установлен класс color-primary, то цвет будет голубой. Почему так происходит? У таких селекторов также есть свои приоритеты. В сложных селекторах считается количество вхождений тех или иных селекторов и считается суммарный вес.

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

• Селектор по тегу: 1
• Селектор по классу: 10
• Селектор по ID: 100
• Стиль в атрибуте тега: 1000

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

• Селектор .paragraph состоит из одного класса, а значит его вес — 10
• Селектор .paragraph.color-primary состоит из двух классов. Его вес — 20

Таким образом свойства у селектора .paragraph.color-primary будут иметь больший приоритет, чем внутри селектора .paragraph.

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

Задание

Добавьте в редактор параграф с классом border и id no-border. Установите следующие правила:

• Для класса border установите сплошную рамку любого цвета толщиной 1px. Это можно сделать так: border: 1px solid #000;
• Для id no-border отмените рамку. Используйте значение none у правила border-style

Первым укажите стили для селектора . border, вторым селектор #no-border

Стили запишите в теге <style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

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

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Каскадность CSS. Как определяется приоритет стилей — учебник CSS

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

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

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

p {color: green;}
.your_class p {color: yellow;}
#your_id p {color: red;}

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

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

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

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

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

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

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

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

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

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

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

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

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

p {color: red !important;}
p {color: green;}

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

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

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

Важность CSS Специфика и лучшие практики

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

Что такое специфика CSS?

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

Какое правило будет иметь приоритет над остальными и почему? Победит тот, у кого будет больше конкретики. Если два или более правила имеют одинаковую специфичность, преимущество будет иметь последнее.

Как рассчитать специфичность?

В объявлениях правил CSS специфичность определяется количеством типов селекторов в соответствующем селекторе. Если несколько объявлений имеют одинаковую специфичность, то оценивается и применяется последнее объявление правила CSS.

Вот различные способы расчета специфичности CSS
1. Использование типов селекторов
2. Использование десятичной системы счисления

Типы селекторов:
Следующий список типов селекторов увеличивается по специфичности:
1. Селектор типа (например, h2 ) и псевдоэлементы (например, ::before ).
2. Селекторы классов (например, .example ), селекторы атрибутов (например, [type="radio"] ) и псевдоклассы (например, :hover ).
3. Селекторы ID (например, #example).

На специфичность не влияют универсальные селекторы(*), комбинаторы(+,~,» «,||,>) , отрицание псевдокласса(:not()) но селекторы внутри :not() влияют на специфичность.

Десятичная система:
В этом случае у нас есть 4 слота, по которым мы можем понять специфику, например: 0 0 0 0 слева имеет большее значение, чем справа. Как это работает с числами в десятичной системе: 1 0 0 0 больше, чем 0 1 0 0.

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

Слот 2
Второй слот увеличивается на:

1. Селекторы класса
2. Селектор псевдокласса
3. Селектор атрибута

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

Пример с комбинацией слота 2 и слота 1

Пример повышения специфичности путем повторения селектора класса

Слот 3
В этом слоте есть самая важная вещь, которая может повлиять на специфичность в CSS, а именно селектор ID, который можно объявить с помощью # с соответствующими именами ID.

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

Влияние на специфичность при использовании !important

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

На что мы обращаем внимание при использовании !important:
1. Прежде чем использовать  !important, мы всегда стараемся использовать специфичность.
2. Мы всегда используем !important только для конкретной страницы, если это необходимо, что не должно влиять на другие внешние css.
3. Мы избегаем использования !important при написании общедоступного кода.

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

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

Ниже приведен порядок правила специфичности, которое имеет приоритет соответственно:
1) Встроенный стиль: Встроенный стиль имеет наивысший приоритет среди всех.
2) Селектор идентификаторов: Имеет второй наивысший приоритет.
3) Классы, псевдоклассы и атрибуты: Эти селекторы имеют самый низкий приоритет.

Помимо этого у нас есть еще несколько, которые имеют приоритет на основе импорта CSS:

1. Внутренний стиль
2. Внешний CSS
3. Встроенный стиль

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

Пример: — В приведенном ниже примере у нас есть один файл external.css с классом, идентичным классу, указанному во внутреннем файле css. Следовательно, когда он отображается в браузере, внутренний css переопределит внешний класс css .div-color из-за правил специфичности, а встроенный css переопределит внутренний класс css .div-color, потому что встроенный css имеет более высокий приоритет, чем внутренний и внутренний. больше, чем внешний.

Как браузер определяет «Специфичность»?

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

1. Селектор идентификаторов (#IdNam)
2. Классы, атрибуты и псевдоклассы
3. Элементы и псевдоэлементы
4. Универсальный (*) селектор

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

Селектор идентификатора имеет наивысший приоритет из-за уникальной природы определения атрибута идентификатора.

У нас есть два класса с одним селектором идентификатора, здесь он будет применять размер шрифта: 12 пикселей и вес шрифта: 500 из-за правила специфичности, поскольку селектор идентификатора имеет наивысший приоритет после встроенного CSS.

Советы, которые следует помнить при работе с проблемами специфичности

1. Универсальный селектор * имеет низкую специфичность или ее отсутствие.
2. Если мы пишем css с !important, то это свойство будет применено, даже если оно имеет низкий приоритет в правилах
3. Селекторы, используемые внутри псевдоклассов, такие как :not() с наивысшей специфичностью, будут специфичностью.
4. Дочерние или одноуровневые селекторы ( >, ~, + ) не добавляют специфичности.

Заключение

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

Присоединяйтесь к нам

Мы всегда ищем лучших инженеров на все должности для нашей технической команды. Если вас увлекли сложные проблемы, которые приводят к большим последствиям, свяжитесь с нами по адресу: [email protected]

О Halodoc

Halodoc — приложение номер 1 для здравоохранения в Индонезии. Наша миссия — упростить и обеспечить качественное здравоохранение по всей Индонезии, от Сабанга до Мерауке. Мы связываем более 20 000 врачей с нуждающимися пациентами через нашу службу телеконсультаций. Мы сотрудничаем с более чем 3500 аптеками в более чем 100 городах, чтобы доставить лекарства к вашему порогу. Мы также сотрудничаем с крупнейшим в Индонезии поставщиком лабораторий для предоставления лабораторных услуг на дому, и в довершение всего мы недавно запустили премиальную услугу записи на прием, которая сотрудничает с более чем 500 больницами, что позволяет пациентам записываться на прием к врачу в нашем приложении. Нам очень повезло, что нам доверяют наши инвесторы, такие как Фонд Билла и Мелинды Гейтс, Singtel, UOB Ventures, Allianz, GoJek и многие другие. Недавно мы закрыли раунд серии B и в общей сложности собрали 100 миллионов долларов США для нашей миссии. Наша команда неустанно работает над созданием наилучшего медицинского решения, персонализированного для всех потребностей наших пациентов, и постоянно находится на пути к упрощению системы здравоохранения в Индонезии.

Специфика CSS

❮ Предыдущий Далее ❯

---

Что такое специфичность?

Если есть два или более правила CSS, которые указывают на один и тот же элемент, селектор с наибольшим значением специфичности «выиграет», а его объявление стиля будет применено к этому элементу HTML.

Думайте о специфичности как о балле/ранге, который определяет, какое объявление стиля в конечном итоге применяется к элементу.

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

Пример 1

В этом примере мы использовали элемент «p» в качестве селектора и указали красный цвет для этого элемента. Текст будет красным:

 

Hello World!

Попробуйте сами »

Теперь посмотрите на пример 2 :

Пример 2

В этом примере мы добавили селектор класса (названный «тест») и указан зеленый цвет для этого класса. Текст теперь будет зеленым (несмотря на то, что мы указали красный цвет для селектора элемента «p»). Это потому, что селектор класса дан более высокий приоритет:

 

Hello World!

Попробуйте сами »

Теперь посмотрите на пример 3:

Пример 3

В этом примере мы добавили селектор id (названный «демо»). Теперь текст будет синий, потому что селектор id имеет более высокий приоритет:

 

Здравствуйте! Мир!

Попробуйте сами »

Теперь посмотрите на пример 4:

Пример 4

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

 

Привет, мир!

Попробуйте сами »

---

Иерархия специфичности

Каждый селектор CSS занимает свое место в иерархии специфичности.

Существует четыре категории, определяющие уровень специфичности селектора:

1. Встроенные стили — Пример:

2. ID — Пример: #навбар
3. Классы, псевдоклассы, селекторы атрибутов — Пример: . test, :hover, [ссылка]
4. Элементы и псевдоэлементы — Пример: h2, ::before

---

Как рассчитать специфичность?

Запомните, как рассчитывать специфичность!

Начните с 0, добавьте 100 для каждого значения идентификатора, добавьте 10 для каждого значение класса (или селектор псевдокласса или атрибута), добавьте 1 для каждого селектора элемента или псевдоэлемента.

Примечание. Встроенный стиль получает значение специфичности 1000 и всегда дается наивысший приоритет!

Примечание 2: Есть один исключение из этого правила: если вы используете !важно правило, он даже переопределяет встроенные стили!

В таблице ниже приведены некоторые примеры расчета значений специфичности:

Селектор	Значение специфичности	Расчет
стр.	1	1
п. тест	11	1 + 10
р#демо	101	1 + 100
	1000	1000
#демо	100	100
.тест	10	10
п.тест1.тест2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (универсальный селектор игнорируется)

Селектор с наивысшим значением специфичности выиграет и вступит в силу!

Рассмотрим эти три фрагмента кода:

Пример

A: h2
B: h2#content
C:

Заголовок

Специфичность A равна 1 (селектор одного элемента)
Специфичность B равна 101 (одна ссылка на идентификатор + один селектор элемента)
Специфичность C равна 1000 (встроенный стиль)

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

---

---

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

Равная специфичность: последнее правило побеждает — Если одно и то же правило дважды записано во внешнюю таблицу стилей, то последнее правило выигрывает:

Пример

h2 {background-color: yellow;}
h2 {background-color: red;}

Попробуйте сами »

---

Селекторы ID имеют более высокую специфичность, чем селекторы атрибутов — Посмотрите на следующие три строки кода:

Пример

div#a {цвет фона: зеленый;}
#a {цвет фона: желтый;}
div[id=a] {цвет фона: синий; }

Попробуйте сами »

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

---

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

Пример

Из внешнего файла CSS:
#content h2 {background-color: red;}

В файле HTML:

будет применяться последнее правило.