path: root/files/ru/web/css/specificity/index.html

---
title: Специфичность
slug: Web/CSS/Specificity
tags:
  - CSS
  - specifity
  - Порядок применения правил
  - Примеры
  - Руководство
  - Специфичность селектора
translation_of: Web/CSS/Specificity
---
<p>{{cssref}}</p>

<h2 id="Определение">Определение</h2>

<p><span class="seoSummary"><strong>Специфичность</strong> - это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из <a href="/ru/docs/Web/CSS/Reference#Selectors" title="/ru/docs/Web/CSS/Reference#Selectors">селекторов CSS</a> различных типов.</span></p>

<h2 id="Как_вычисляется_специфичность">Как вычисляется <span class="seoSummary">специфичность</span>?</h2>

<p>Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из <a href="#Selector_Types">типов селекторов</a> в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для <a href="#directly-targeted-elements">непосредственно соответствующего элемента</a> всегда будет иметь больший приоритет, чем правила, унаследованные от предка.</p>

<div class="note">Примечание: <a href="#tree-proximity-ignorance">Взаимное расположение элементов</a> в дереве документа не влияет на специфичность.</div>

<h3 id="Типы_селекторов">Типы селекторов</h3>

<p>В следующем списке типы селекторов расположены по возрастанию специфичности:</p>

<ol start="0">
 <li>селекторы типов элементов (например, <code>h1</code>) и псевдоэлементов (например, <code>::before</code>).</li>
 <li>селекторы классов (например, <code>.example</code>), селекторы атрибутов (например, <code>[type="radio"]</code>) и псевдоклассов (например, <code>:hover</code>).</li>
 <li>селекторы идентификаторов (например, <code>#example</code>).</li>
</ol>

<p>Универсальный селектор (<code>*</code>), комбинаторы (<code>+</code>, <code>&gt;</code>, <code>~</code>, '<code> </code>') и отрицающий псевдокласс (<code>:not()</code>) не влияют на специфичность. (Однако селекторы, объявленные <em>внутри</em> <code>:not()</code>, влияют)</p>

<p>Стили, объявленные в элементе (например, <code>style="font-weight:bold"</code>), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.</p>

<h3 id="Важное_исключение_из_правил_-_!important">Важное исключение из правил - <code>!important</code></h3>

<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применен будет стиль с большей специфичностью.</p>

<p><strong>Несколько практических советов:</strong></p>

<ul>
 <li><strong>Всегда пытайтесь использовать</strong> специфичность, а <code>!important</code> используйте только в крайних случаях</li>
 <li><strong>Используйте</strong> <code>!important</code> <strong>только</strong> в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)</li>
 <li><strong>Никогда не используйте</strong> <code>!important</code>, если вы пишете плагин или мэшап.</li>
 <li><strong>Никогда не используйте</strong> <code>!important</code> в общем CSS сайта.</li>
</ul>

<p><strong>Вместо <code>!important</code> можно:</strong></p>

<ol>
 <li>Лучше использовать каскадные свойства CSS</li>
 <li>
  <p>Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:</p>

  <pre class="lang-html prettyprint prettyprinted"><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"test"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">Text</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre>

  <pre class="lang-css prettyprint prettyprinted"><code><span class="pln">div</span><span class="pun">#</span><span class="pln">test span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> green </span><span class="pun">}</span><span class="pln">
div span { color: blue }
span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">color</span><span class="pun">:</span><span class="pln"> red </span><span class="pun">}</span><span class="pln">
</span></code></pre>
 </li>
</ol>

<p>Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).</p>

<p><strong>Вам придется использовать <code>!important</code> если:</strong></p>

<p>А) Первый сценарий:</p>

<ol>
 <li>У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.</li>
 <li>Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах</li>
</ol>

<p>В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p>

<p>Пример из практики: Некоторые плохо написанные <strong>плагины jQuery</strong>, использующие присваивание стилей самим элементам.</p>

<p>Б) Еще сценарий:</p>

<pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln">
    color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln">
    color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

<p>Как сделать цвет текста в абзацах <code>awesome</code> красным всегда, даже если они расположены внутри <code>#someElement</code>? Без <code>!important</code> у первого правила специфичность больше и оно имеет преимущество перед вторым.</p>

<p><strong>Как преодолеть !important</strong></p>

<p>A) Просто добавьте еще одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p>

<p>Пример большей специфичности:</p>

<pre class="default prettyprint prettyprinted"><code><span class="pln">table td    </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln">
</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre>

<p>Б) Или добавьте правило с модификатором <code>!important</code> и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):</p>

<pre class="default prettyprint prettyprinted"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre>

<p>В) Или перепишите первоначальное правило без использования <code>!important</code>.</p>

<p><strong>С более подробной информацией можно ознакомиться по следующим ссылкам: </strong></p>

<p><a href="http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">Когда надо использовать <code>!important</code> в CSS?</a></p>

<p><a href="http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">Что означает <code>!important</code> в CSS?</a></p>

<p><a href="http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">Когда в CSS надо использовать модификатор <code>!important</code></a></p>

<p><a href="http://stackoverflow.com/questions/11178673/how-to-override-important">Как преодолеть <code>!important</code></a></p>

<p><a href="http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">Как использовать модификатор <code>!important</code> в CSS чтобы сэкономить время</a></p>

<p> </p>

<h3 id="Не_исключение_-_not()">Не исключение - <code>:not()</code></h3>

<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчете количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p>

<p>Следующий фрагмент CSS ...</p>

<pre class="brush: css">div.outer p {
  color: orange;
}
div:not(.outer) p {
  color: lime;
}
</pre>

<p>... примененный к такому HTML ...</p>

<pre class="brush: html">&lt;div class="outer"&gt;
  &lt;p&gt;Это div.outer&lt;/p&gt;
  &lt;div class="inner"&gt;
    &lt;p&gt;Это текст в div.inner&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<p>... отобразится на экране так:</p>

<p><span style="color: #ffa500;">Это div.outer</span></p>

<p><span style="color: #00ff00;">Это текст в div.inner</span></p>

<h3 id="Специфичность_основана_на_форме">Специфичность основана на форме</h3>

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

<p>Эти объявления стилей ...</p>

<pre class="brush: css">*#foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}
</pre>

<p>... примененные к нижеследующей разметке ...</p>

<pre class="brush: html">&lt;p id="foo"&gt;Это пример.&lt;/p&gt;
</pre>

<p>... в результате выглядят так:</p>

<p><span style="color: #008000;">Это пример.</span></p>

<p>Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.</p>

<h3 id="Независимость_от_расположения"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">Независимость от расположения</a></h3>

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

<pre class="brush: css">body h1 {
  color: green;
}
html h1 {
  color: purple;
}
</pre>

<p>... в сочетании со следующим HTML ...</p>

<pre class="brush: html">&lt;html&gt;
&lt;body&gt;
  &lt;h1&gt;Вот заголовок!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>... отобразится как:</p>

<p><span style="color: #800080;">Вот заголовок!</span></p>

<p>Потому что, хотя оба объявления имеют одинаковое количество <a href="#selector-type">типов селекторов</a>, но селектор <code>html h1</code> объявлен последним.</p>

<h3 id="Непосредственно_соответствующие_элементы_и_унаследованные_стили"><a id="directly-targeted-elements" name="directly-targeted-elements">Непосредственно соответствующие элементы и унаследованные стили</a></h3>

<p>Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...</p>

<pre class="brush: css" style="font-size: 14px;">#parent {
  color: green;
}
h1 {
  color: purple;
}</pre>

<p>... с таким HTML ...</p>

<pre class="brush: html" style="font-size: 14px;">&lt;html&gt;
&lt;body id="parent"&gt;
  &lt;h1&gt;Вот заголовок!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<p>... тоже отобразится как:</p>

<p><span style="color: #800080;">Вот заголовок!</span></p>

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

<h2 id="Дополнительная_информация">Дополнительная информация</h2>

<ul>
 <li>Калькулятор специфичности: Интерактивный сайт, помогающий вам проверить и понять ваши собственные правила CSS - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
 <li>Специфичность селекторов в CSS3 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
 <li>{{ CSS_key_concepts() }}</li>
</ul>