Вопросы Теги

Почему мои свойства 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:

Screenshot of how Chrome is rendering my CSS

По какой-то причине правила #content p, #content liпереопределяют мои правила для .item-descriptionи .item-meta. У меня сложилось впечатление, что имена классов/идентификаторов считаются специфическими и, следовательно, имеют более высокий приоритет. Однако, похоже, я неправильно понимаю, как работает CSS. Что я здесь делаю неправильно?

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

15
задан kibibyte 4 May 2012 в 04:20
поделиться