path: root/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html

---
title: Каскад и наследование
slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
tags:
  - CSS
  - Каскад
  - Наследование
  - Начинающий
  - Обучение
  - Порядок следования
  - Правила
  - Специфичность
translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
---
<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>

<p>Цель этого урока — углубить Ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.</p>

<p>Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые условия:</th>
   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (<a href="/ru-RU/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Изучить понятие о каскаде и специфичности, и как работает наследование CSS.</td>
  </tr>
 </tbody>
</table>

<h2 id="Конфликтующие_правила">Конфликтующие правила</h2>

<p>CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово <em>"каскадные" </em>является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.</p>

<p>В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применен к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. <strong>Каскад</strong> и тесно связанная концепция <strong>специфичности</strong> <span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>— </span> это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.</p>

<p>Также значимой является концепция <strong>наследования, </strong>которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.</p>

<p>Давайте начнём с краткого обзора ключевых моментов, которых мы касаемся, далее рассмотрим каждый из них по очереди и посмотрим, как они взаимодействуют друг с другом и с вашим CSS. Это может показаться набором сложных для понимания понятий. Однако, когда вы получите больше опыта в написании CSS, для вас станет более очевидным то, как это работает.</p>

<h3 id="Каскад">Каскад</h3>

<p>Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть два правила, которые могут применяться к h1. В результате </span><span title="">h1 окрасится синим цветом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.</span></span></p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>

<h3 id="Специфичность">Специфичность</h3>

<p>Cпецифичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. <em>Различные типы селекторов ( селекторы элементов <code>h1{...}</code>, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.</em> По существу, это мера того, насколько специфическим будет отбор по селектору:</p>

<ul>
 <li>Селектор элементов ( <em>например <code>h1</code></em> ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.</li>
 <li>
  <p class="brush: css">Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута <code>class</code> — поэтому получит больше баллов, <em>селектор класса применится после селектора элемента и поэтому перекроет его стили</em>.</p>
 </li>
</ul>

<p>Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к <code>h1</code>. <code>h1</code> в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>

<p>Позже мы объясним, как сделать оценку специфичности, и прочие детали.</p>

<h3 id="Наследование">Наследование</h3>

<p>Наследование также надо понимать в этом контексте — некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.</p>

<p>Например, если вы установили значение <code>color</code> и <code>font-family</code> для элемента, то каждый элемент внутри него также будет иметь этот цвет и шрифт, если только вы не применили к ним напрямую стиль с другим цветом и шрифтом.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>

<p>Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы черезвычайно трудно использовать!</p>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: <a href="https://developer.mozilla.org/ru-RU/docs/Web/CSS/color#Specifications">color property Specifications section</a>.</p>
</div>

<h2 id="Понимание_взаимодействия_этих_концепций">Понимание взаимодействия этих концепций</h2>

<p>Эти три концепции вместе определяют, какая CSS применяется и к какому элементу; в следующих разделах мы увидим, как они взаимодействуют. Это может показаться сложным, но вы начнёте лучше понимать их по мере приобретения опыта работы с CSS, и вы всегда можете обратиться к справочной информации, если что-то забыли. Даже опытные разработчики не помнят всех деталей!</p>

<p>Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:</p>

<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p>

<h2 id="Понимание_наследования">Понимание наследования</h2>

<p>Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы устанавили для внешнего <code>&lt;ul&gt;</code> стиль границы, внутренние отступы и цвет шрифта.</p>

<p>Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <code>&lt;li&gt;</code> и к элементам внутри первого вложенного списка. Далее мы добавили класс <code>special</code> ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>

<p>Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!</p>

<p>Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.</p>

<h3 id="Контроль_наследования">Контроль наследования</h3>

<p>CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.</p>

<dl>
 <dt>{{cssxref("inherit")}}</dt>
 <dd>Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это "включает наследование".</dd>
 <dt>{{cssxref("initial")}}</dt>
 <dd>Устанавливает значение свойства, применённого к выбранному элементу, равным <a href="https://wiki.developer.mozilla.org/ru-RU/docs/Web/CSS/initial_value">initial value</a> этого свойства (<em>в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)</em></dd>
 <dt>{{cssxref("unset")}}</dt>
 <dd>Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как <code>inherit</code>, иначе оно действует как <code>initial</code>.</dd>
</dl>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: Существует также более новое значение {{cssxref("revert")}}, которое имеет ограниченную поддержку браузерами.</p>
</div>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: Смотрите {{SectionOnPage("/ru-RU/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} для более подробной информации о каждом из них, и о том, как они работают.</p>
</div>

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

<p>Например:</p>

<ol>
 <li>Второй элемент списка имеет класс <code>my-class-1</code>. Таким образом, цвет для следующего вложенного элемента <code>a</code> устанавливается по наследству. Как изменится цвет, если это правило будет удалено?</li>
 <li>Понятно ли, почему третий и четвертый элементы <code>a</code> имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.</li>
 <li>Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <code>&lt;a&gt;</code> — например: <code>a { color: red; }</code>?</li>
</ol>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}</p>

<h3 id="Возврат_всех_исходных_значений_свойств">Возврат всех исходных значений свойств</h3>

<p>Стенографическое свойство CSS <code>all</code> можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырех значений (<code>inherit</code>, <code>initial</code>, <code>unset</code>, или <code>revert</code>). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.</p>

<p>В примере ниже имеются два блока <code>&lt;blockquote&gt;</code>. Первый имеет стиль, который применён к самому элементу <code>blockquote</code>, второй имеет класс <code>fix-this</code>, который устанавливает значение <code>all</code> в <code>unset</code>.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>

<p>Попробуйте установить для <code>all</code> ещё одно из доступных значений и исследуйте, в чём заключается разница.</p>

<h2 id="Понимание_каскада">Понимание каскада</h2>

<p>Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS правил, применяемых в случае влияния на стиль элемента нескольких объектов.</p>

<p>Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.</p>

<ol>
 <li><strong>Порядок следования</strong></li>
 <li><strong>Специфичность</strong></li>
 <li><strong>Важность</strong></li>
</ol>

<p>Мы внимательно изучим их, чтобы увидеть, как именно браузеры определяют, какой CSS следует применить.</p>

<h3 id="Порядок_следования">Порядок следования</h3>

<p>Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идет последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент. </p>

<h3 id="Специфичность_2">Специфичность</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило.</span> <span title="">Это связано с тем, что более раннее правило имеет более <strong>высокую специфичность</strong> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определенные в классе, будут переопределять свойства, примененные непосредственно к элементу.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Такое поведение помогает избежать повторения в вашем CSS.</span> <span title="">Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются.</span> <span title="">Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения.</span> <span title="">Определенные вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.</span></span></p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте теперь посмотрим, как браузер будет вычислять специфичность.</span> <span title="">Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом.</span> <span title="">По существу, значение в баллах присуждается различным типам селекторов, и их сложение дает вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Степень специфичности, которой обладает селектор, измеряется с использованием четырех различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> четыре однозначные цифры в четырех столбцах:</span></span></p>

<ol>
 <li><strong>Тысячи</strong>: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.</li>
 <li><strong>Сотни</strong>: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.</li>
 <li><strong>Десятки</strong>: поставьте единицу в эту колонку за каждый <span class="tlid-translation translation" lang="ru"><span title="">селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.</span></span></li>
 <li><strong>Единицы</strong>: поставьте общее число единиц в эту колонку за каждый <span class="tlid-translation translation" lang="ru"><span title="">селектор элемента или псевдоэлемент, содержащийся в общем селекторе.</span></span></li>
</ol>

<div class="note">
<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>Примечание:</strong> Универсальный селектор (*), комбинаторы (+, &gt;,  ~, '') и псевдо-класс отрицания (:not) не влияют на специфичность.</span></span></p>
</div>

<p><span class="tlid-translation translation" lang="ru"><span title="">Следующая таблица показывает несколько несвязанных примеров, которые помогут вам</span></span> разобраться. <span class="tlid-translation translation" lang="ru"><span title="">Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в</span></span> <a href="/ru/docs/Web/CSS/CSS_Селекторы">справочнике селекторов</a> MDN.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Селектор</th>
   <th scope="col">Тысячи</th>
   <th scope="col">Сотни</th>
   <th scope="col">Десятки</th>
   <th scope="col">Единицы</th>
   <th scope="col">Специфичность</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>h1</code></td>
   <td>0</td>
   <td>0</td>
   <td>0</td>
   <td>1</td>
   <td>0001</td>
  </tr>
  <tr>
   <td><code>h1 + p::first-letter</code></td>
   <td>0</td>
   <td>0</td>
   <td>0</td>
   <td>3</td>
   <td>0003</td>
  </tr>
  <tr>
   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
   <td>0</td>
   <td>0</td>
   <td>2</td>
   <td>2</td>
   <td>0022</td>
  </tr>
  <tr>
   <td><code>#identifier</code></td>
   <td>0</td>
   <td>1</td>
   <td>0</td>
   <td>0</td>
   <td>0100</td>
  </tr>
  <tr>
   <td>Без селектора, с правилом внутри атрибута {{htmlattrxref("style")}} элемента.</td>
   <td>1</td>
   <td>0</td>
   <td>0</td>
   <td>0</td>
   <td>1000</td>
  </tr>
 </tbody>
</table>

<p><span class="tlid-translation translation" lang="ru"><span title="">Прежде чем мы продолжим, давайте посмотрим на пример в действии.</span></span></p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Так что здесь происходит?</span> <span title="">Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.</span></span></p>

<ul>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Первые два правила конкурируют за стилизацию цвета фона ссылки </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Третье и четвертое правило конкурируют за стилизацию цвета текста ссылки </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы</span><span title="">.</span> <span title="">Таким образом, приоритетная специфичность составляет 113 против 104.</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора.</span> <span title="">Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> у него в цепочке на один селектор элемента меньше.</span> <span title="">Седьмой селектор, однако, превосходит как пятый, так и шестой </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> </span></span><span class="tlid-translation translation" lang="ru"><span title="">он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса.</span> <span title="">Таким образом, приоритетная специфичность 33 против 23 и 24.</span></span></li>
</ul>

<div class="note">
<p><strong>Примечание</strong>: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, <em>миллион</em> соединённых селекторов <strong>класса</strong> не способны переписать правила <em>одного</em> селектора <strong>id</strong>.</p>

<p>Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда  оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности.</p>
</div>

<h3 id="!important">!important</h3>

<p><span class="tlid-translation translation" lang="ru"><span title="">Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием</span></span> — <code>!important</code>. <span class="tlid-translation translation" lang="ru"><span title="">Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.</span></span></p>

<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте пройдемся по этому примеру, чтобы увидеть, что происходит </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:</span></span></p>

<ol>
 <li>Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? <span class="tlid-translation translation" lang="ru"><span title="">Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Однако вышеприведенные правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.</span></span></li>
 <li>Оба элемента имеют {{htmlattrxref("class")}} с названием <code>better</code>, но у второго также есть {{htmlattrxref("id")}} с названием <code>winning</code>. <span class="tlid-translation translation" lang="ru"><span title="">Поскольку ID имеют <em>ещё более высокую</em> специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> селекторы ID <em>очень специфичны</em>, на что они и нацелены), красный цвет фона и однопиксельная</span> <span title="">черная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">2-й элемент получил красный цвет фона и отсутствие границы.</span> Почему<span title="">?</span> </span> Из-за объявления <code>!important</code> во втором правиле — размещение которого после <code>border: none</code> <span class="tlid-translation translation" lang="ru"><span title="">означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.</span></span></li>
</ol>

<div class="note">
<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Единственный способ переопределить объявление</span></span> <code>!important</code> –  <span class="tlid-translation translation" lang="ru"><span title="">это включить другое объявление </span></span><code>!important</code> <span class="tlid-translation translation" lang="ru"><span title="">в правило <em>с такой же специфичностью</em> позже или в правило с более высокой специфичностью.</span></span></p>
</div>

<p>Полезно знать о существовании <code>!important</code>, чтобы вы понимали, что это такое, когда встретите в чужом коде. <strong><span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости</span></span>.</strong> <code>!important</code> <span class="tlid-translation translation" lang="ru"><span title="">меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Одна из ситуаций, в которой вам, возможно, придётся это использовать, </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом.</span> <span title="">Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.</span></span></p>

<h2 id="Влияние_расположения_CSS">Влияние расположения CSS</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет</span> <span title="">установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.</span></span></p>

<h2 id="Подведение_итогов">Подведение итогов</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними</span></span>:</p>

<ol>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками)</span></span>.</li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Важные объявления в авторских таблицах стилей.</span></span></li>
 <li><span class="tlid-translation translation" lang="ru"><span title="">Важные объявления в пользовательских таблицах стилей.</span></span></li>
</ol>

<p><span class="tlid-translation translation" lang="ru"><span title="">Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это может быть достигнуто с помощью использования</span></span> <code>!important</code> <span class="tlid-translation translation" lang="ru"><span title="">в их правилах.</span></span></p>

<h2 id="Проверьте_ваши_навыки"><span class="tlid-translation translation" lang="ru"><span title="">Проверьте ваши навыки</span></span></h2>

<p>Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8">Test your skills: the Cascade</a>.</p>

<h2 id="Что_дальше">Что дальше?</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы поняли большую часть этой статьи,</span></span><span class="tlid-translation translation" lang="ru"><span title=""> отлично </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> вы начали знакомиться с фундаментальными механизмами CSS.</span> <span title="">Далее мы рассмотрим селекторы подробно.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь!</span> <span title="">Это, безусловно, самая сложная вещь из тех, что мы до сих пор  изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной.</span> <span title="">Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.</span></span></p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Обратитесь сюда, если вы столкнетесь со странными проблемами, когда стили применяются не так, как вы ожидаете.</span> <span title="">Это может быть проблемой специфичности.</span></span></p>

<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ol>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
  <ul>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
  </ul>
 </li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
 <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
</ol>