Почему мои свойства CSS переопределяются/игнорируются?

У меня возникают некоторые проблемы с иерархией 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. Что я здесь делаю неправильно?

Изменить: Кроме того, где я могу узнать больше о том, как работает эта иерархия?

Ответ 1

Элементы id имеют приоритет в CSS, поскольку они являются наиболее конкретными. Вам просто нужно использовать id:

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

В основном идентификатор имеет приоритет в классе, который имеет приоритет для тегов (p, li, ul, h1...). Чтобы отменить правило, просто убедитесь, что у вас есть приоритет;)

Ответ 2

"Иерархия", в которой измеряются правила CSS, называется специфичностью. Каждая часть правила CSS имеет фактическое числовое значение базы-10. Идентификаторы стоят 100, а классы - всего 10.

Для получения дополнительной информации см. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Ответ 3

Идентификатор таргетинга более специфичен, чем классы таргетинга. Более конкретный стиль будет заменять менее конкретный стиль. Следует отметить, что встроенный стиль в 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-трюках:

http://css-tricks.com/specifics-on-css-specificity/

Ответ 4

Мой ответ должен был быть "комментарием" на ответ, но у меня есть правильное исправление, хотя #tibo правильно ответил:

li.post-item > * {
  margin: 0px !important;
}

.item-description {
  color: #FFF !important;
}

.item-meta {
  color: #666 !important;
}

Правило !important переопределит порядок оценки между id и классом.

Вот ссылка на статью, При использовании! important - правильный выбор, который поможет вам понять... он сделал моя жизнь проще:)

Ответ 5

Лучше следовать стандартам CSS. выберите css selector и makeit под своим родителем, тогда u может не получить конфликтов при загрузке css fles (например .css файлов)