Por que minhas propriedades CSS estão sendo substituídas / ignoradas?

Question

May 04, 2012, 06:20 AM

Por que minhas propriedades CSS estão sendo substituídas / ignoradas?

Estou tendo alguns problemas com a "hierarquia" do CSS (não tenho certeza se é apropriado chamá-la de hierarquia). Estou tentando estilizar o bit abaixo do HTML.

<code><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>
</code>

Como o conteúdo da seção # muda em cada página que eu tenho, eu queria manter estilos consistentes em todos eles, então escrevi algumas regras CSS "globais".

<code>#content {
  color: #000;
  margin-left: 300px;
  max-width: 620px;
  padding: 0px 10px;
  position: relative;
}

#content p,
#content li {
  color: #111;
  font: 16px / 24px serif;
}
</code>

Eu queria estilo HTML dentro de umul.posts-list diferentemente, então escrevi essas regras.

<code>li.post-item > * {
  margin: 0px;
}

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}
</code>

No entanto, me deparei com alguns problemas. Aqui está como o Chrome está renderizando o CSS:

Por alguma razão, as regras#content p, #content li estão substituindo minhas regras para.item-description e.item-meta. Minha impressão foi que os nomes de classe / id são considerados específicos e, portanto, de maior prioridade. No entanto, parece que eu tenho um mal entendido de como o CSS funciona. O que eu estou fazendo errado aqui?

Edit: Além disso, onde posso ler mais sobre como funciona essa hierarquia?