У меня возникают некоторые проблемы с иерархией CSS (не уверен, правильно ли назвать ее иерархией). Я пытаюсь создать нижний бит HTML.
<body>
<section id="content">
<article>
<ul class="posts-list">
<li class="post-item">
<h2>[post title]</h2>
<p class="item-description">...</p>
<p class="item-meta">...</p>
</li>
...
</ul>
</article>
</section>
</body>
Поскольку содержимое раздела # изменяется на каждой странице, я хотел бы поддерживать согласованные стили для всех из них, поэтому я написал несколько "глобальных" правил CSS.
#content {
color: #000;
margin-left: 300px;
max-width: 620px;
padding: 0px 10px;
position: relative;
}
#content p,
#content li {
color: #111;
font: 16px / 24px serif;
}
Я хотел бы по-разному стиль HTML внутри ul.posts-list, поэтому я написал эти правила.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
Однако я столкнулся с некоторыми проблемами. Вот как Chrome предоставляет CSS:
По какой-то причине правила #content p, #content li переопределяют мои правила для .item-description и .item-meta. Мое впечатление заключалось в том, что имена классов/идентификаторов считаются конкретными и, следовательно, более приоритетными. Однако, похоже, я неправильно понимаю, как работает CSS. Что я здесь делаю неправильно?
Изменить: Кроме того, где я могу узнать больше о том, как работает эта иерархия?
Элементы id имеют приоритет в CSS, поскольку они являются наиболее конкретными. Вам просто нужно использовать id:
#content li.post-item > * {
margin: 0px;
}
#content .item-description {
color: #FFF;
}
#content .item-meta {
color: #666;
}
В основном идентификатор имеет приоритет в классе, который имеет приоритет для тегов (p, li, ul, h1...). Чтобы отменить правило, просто убедитесь, что у вас есть приоритет;)
"Иерархия", в которой измеряются правила CSS, называется специфичностью. Каждая часть правила CSS имеет фактическое числовое значение базы-10. Идентификаторы стоят 100, а классы - всего 10.
Для получения дополнительной информации см. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Идентификатор таргетинга более специфичен, чем классы таргетинга. Более конкретный стиль будет заменять менее конкретный стиль. Следует отметить, что встроенный стиль в HTML более специфичен и, следовательно, перезаписывает стиль ID-таргетинга. Другими словами:
<p style="color:white" id="itemDescId" class="item-description">...</p>
С CSS:
p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}
Текст будет выглядеть белым - не потому, что он ближе всего к HTML-коду, а потому, что он выше в иерархии спецификаций. Если вы удалите встроенный стиль (и вы, как правило, должны использовать более удобный код), тогда текст станет красным. Удалите идентификатор, и он будет зеленым. И, наконец, он будет синим, как только класс будет удален.
Это одна из наиболее сложных тем, которые нужно понимать в CSS, и я только царапаю поверхность, но самое легкое описание, которое я нашел о том, как работает CSS-специфика, выполняется при CSS-трюках:
Мой ответ должен был быть "комментарием" на ответ, но у меня есть правильное исправление, хотя #tibo правильно ответил:
li.post-item > * {
margin: 0px !important;
}
.item-description {
color: #FFF !important;
}
.item-meta {
color: #666 !important;
}
Правило !important переопределит порядок оценки между id и классом.
Вот ссылка на статью, При использовании! important - правильный выбор, который поможет вам понять... он сделал моя жизнь проще:)
Лучше следовать стандартам CSS. выберите css selector и makeit под своим родителем, тогда u может не получить конфликтов при загрузке css fles (например .css файлов)