¿Por qué mis propiedades CSS están siendo anuladas / ignoradas?

Tengo algunos problemas con la "jerarquía" de CSS (no estoy seguro de si es correcto llamarlo jerarquía). Estoy tratando de estilo el bit de abajo de 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>

Dado que la sección # contenido cambia en cada página que tengo, quería mantener estilos consistentes en todas ellas, así que escribí algunas reglas CSS "globales".

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

Quería estilo HTML dentro de unul.posts-list diferente, así que escribí estas reglas.

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

.item-description {
  color: #FFF;
}

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

Sin embargo, me encontré con algunos problemas. Aquí es cómo Chrome está representando el CSS:

Por alguna razón, las reglas#content p, #content li están anulando mis reglas para.item-description y.item-meta. Mi impresión fue que los nombres de clase / identificación se consideran específicos y, por lo tanto, de mayor prioridad. Sin embargo, parece que tengo una mala interpretación de cómo funciona CSS. ¿Qué estoy haciendo mal aquí?

Edición: Además, ¿dónde puedo leer más sobre cómo funciona esta jerarquía?

Respuestas a la pregunta(5)

Su respuesta a la pregunta