¿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.
<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>
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".
#content {
color: #000;
margin-left: 300px;
max-width: 620px;
padding: 0px 10px;
position: relative;
}
#content p,
#content li {
color: #111;
font: 16px / 24px serif;
}
Quería estilo HTML dentro de unul.posts-list
diferente, así que escribí estas reglas.
li.post-item > * {
margin: 0px;
}
.item-description {
color: #FFF;
}
.item-meta {
color: #666;
}
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?