¿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 una jerarquía). Estoy tratando de estilo el siguiente bit de HTML.¿Por qué mis propiedades CSS están siendo anuladas/ignoradas?

<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 los cambios sección # contenido en todas las páginas que tengo, querido mantener estilos consistentes a través de todos ellos, así que escribió 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; 
}

yo quería HTML dentro de un estilo ul.posts-list diferente, por lo que escribió 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á prestando la CSS:

Screenshot of how Chrome is rendering my CSS

Por alguna razón, las normas #content p, #content li preponderantes con 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 un malentendido sobre cómo funciona CSS. ¿Qué estoy haciendo mal aquí?

Editar: Además, ¿dónde puedo obtener más información acerca de cómo funciona esta jerarquía?

Fuente

2012-05-04 kibibyte

Identificación de elementos tiene la prioridad en CSS, ya que son los más específicos. Sólo tienes que utilizar el ID:

#content li.post-item > * { 
    margin: 0px; 
} 

#content .item-description { 
    color: #FFF; 
} 

#content .item-meta { 
    color: #666; 
}

Básicamente identificación tienen la prioridad de la clase de la que la prioridad en las etiquetas (p, li, ul, h1 ...). Para anular la regla, solo asegúrese de tener la prioridad;)

Fuente

2012-05-04 04:24:00 tibo

+1 en código, pero algunos enlaces no pueden doler. [especificación oficial sobre especificidad] (http://www.w3.org/TR/CSS21/cascade.html#specificity) y [hoja de trucos amistosa] (http://www.stuffandnonsense.co.uk/archives/images/ specificitywars-05v2.jpg) – benesch

+1 para la hoja de trucos amistosa o "cómo explicar la especificidad de CSS a un geek"! ¡Excelente! – tibo

La "jerarquía" en la que se miden las reglas CSS se denomina especificidad. Cada parte de una regla CSS tiene un valor numérico real de base 10. ID son un valor de 100, mientras que las clases son solamente 10.

Para más información ver http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Fuente

2012-05-04 04:24:39 jaredhoyt

ID de orientación de es más específica que la orientación clases. Un estilo más específico sobreescribirá un estilo menos específico. Se debe tener en cuenta que el estilo en línea en HTML es más específico y, por lo tanto, sobrescribirá el diseño orientado a ID. En otras palabras:

<p style="color:white" id="itemDescId" class="item-description">...</p>

Con el CSS:

p{color:blue;} 
#itemDescId{color:red;} 
.item-description{color:green}

El texto aparecerá blanco - no porque es más cercano al código html, sino porque es más alto en la jerarquía de especificidad. Si elimina el estilo en línea (y normalmente debería usar un código más limpio y más manejable), el texto se volvería rojo. Retire la identificación y será verde. Y finalmente será azul una vez que se elimine la clase.

Este es uno de los temas más complejos de entender en el CSS, y yo sólo estoy rascando la superficie, pero la descripción más sencilla que he encontrado sobre cómo funciona la especificidad de CSS ha terminado en trucos CSS:

http://css-tricks.com/specifics-on-css-specificity/

Fuente

2014-07-27 21:35:31 Pupchuck

Mi respuesta debería haber sido un "comentario" en la respuesta, pero tengo la solución correcta a pesar de #tibo respondió correctamente:

li.post-item > * { 
    margin: 0px !important; 
} 

.item-description { 
    color: #FFF !important; 
} 

.item-meta { 
    color: #666 !important; 
}

la regla !important anulará la orden de evaluación entre un ID nd clase.

Aquí hay un enlace a un artículo, When Using !important is The Right Choice, que le ayudará a entender ... que hizo que mi vida más fácil :)

Fuente

2015-10-28 04:35:41

... ediciones baratas .... js ... –

mejor seguir los estándares CSS. elija el selector css y makeit debajo de su padre, entonces puede que no se generen conflictos al cargar archivos css (como archivos .css)

Fuente

2016-03-21 18:58:16

¿Podría elaborar o dar una muestra del código de lo que quiere decir? No entiendo muy bien lo que estás diciendo. – Kmeixner

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

Respuesta

Cuestiones relacionadas