приоритетность css-правил

Анна Иноземцева · July 29, 2016

Добрый день!
У меня следующий вопрос. ДОпустим, мой html-код выглядит так:

...
<body>
<div id="allcontent">
....
....
</div>
</body>

А css-код такой:

body {
color: red;
}

#allcontent {
color: green;
}

Цвет шрифта на моей странице будет зеленым, так как нижнее правило приоритетно, так? Но. Если css-код выглядит так:

body {
color: red;
}

h1 {
color: blue;
}

#allcontent {
color: green;
}

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

alejandro13 · July 29, 2016

Нижнее правило имело бы приоритет, если бы #allcontent был прописан у самого тега h1.

В комментариях к этой статье есть очень неплохая формулировка данного вопроса:

Цитата

Стиль идентификатора, класса или селектора тега имеет больший приоритет, чем наследование этих свойств от родителей, вне зависимости от специфичности

Switch74 · July 30, 2016

а где у вас h1 лежит? Если в #allcontent, то вы переназначили для h1 цвет сами.
По приоритету стилей очень много нюансов есть
расположение в css влияет только на правила для одного элемента с одинаковым весом
в вашем случае #allcontent - div, а h1 - это уже другой элемент

Sign In

приоритетность css-правил

Question

Анна Иноземцева

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

alejandro13

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information