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