¿Por qué mi HTML no usa el último estilo definido en el CSS?

Tengo el siguiente CSS escrito en este orden:

h2:last-child, p:last-child, ul:last-child { margin-bottom: 0; } .content-message { margin: 20px -1.667em -1.667em -1.667em; margin-bottom: -1.667em; } 

y mi HTML:

 
  • xx

Cuando compruebo puedo ver que el ul obtiene su estilo del primer CSS y tiene un margen inferior de 0. ¿Puede alguien explicar por qué es así? También hay una manera de que pueda arreglar esto.

Consulte este artículo que describe los problemas de especificidad CSS: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Orden de preferencia: elemento selector

Así que especificarlo como un atributo Id debería funcionar

  #content-message { margin: 20px -1.667em -1.667em -1.667em; margin-bottom: -1.667em; 

y

    Actualización: en su caso, independientemente de los casos anteriores, tiene estilo de style="margin-bottom: -1.667em;" línea style="margin-bottom: -1.667em;" anulará cualquier otro css. Sorprendido de ver que eso no sucede contigo.

    Se hace por orden de especificidad. En este caso, ul: last-child es más específico porque tiene dos condiciones:

    • Tiene que ser un ul
    • Tiene que ser el último niño

    Mientras que su segundo estilo solo tiene una condición:

    • Tiene que tener el mensaje de contenido de la clase

    Para hacer que el segundo estilo sea tan específico como el primero, debe agregar otra condición:

     ul.content-message { margin: 20px -1.667em -1.667em -1.667em; margin-bottom: -1.667em; } 

    Debido a que las dos reglas son igualmente específicas, la segunda regla tiene prioridad porque está escrita al final. Tenga en cuenta que esto es una simplificación de la especificidad de CSS: el orden funciona de la siguiente manera:

    1. Estilos en línea con! Importante
    2. Estilos de estilos de estilo con! Importante
    3. Estilos en línea sin! Importante
    4. Selectores que contienen una identificación (#myItem)
    5. Clases, nombres de tags, pseudo clases, etc.

    Cualquier selector de más arriba en la lista tendrá prioridad, mientras que dos selectores del mismo nivel estarán determinados por cuántos de ese tipo hay (por lo que dos clases son menos específicas que una identificación, pero tan específicas como un estilo y una etiqueta) . Dos estilos tendrán la misma ponderación con respecto al último estilo definido.

    Es posible que me equivoque en todos los puntos del punto 5 con la misma ponderación, pero para una mejor comprensión, consulte http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html o artículos similares que se encuentren en Google.

    Por favor ponga una marca “! Important” a la que le indique qué aplicar.