Cuando tenemos varias reglas CSS en cascada que afectan a un mismo elemento, el orden de prioridad que determina como se mostrará el elemento es el siguiente:
1º !important: un estilo marcado como importante prevalecerá sobre el resto de estilos. En caso de tener varios estilos marcados con !important, prevalecerá el de mayor peso según las reglas que estamos explicando.
2º Origen de las reglas: las reglas del autor de la web prevalecerán sobre las reglas del lector de similar peso. Y tanto las reglas de autor como de lector prevalecerán sobre las del navegador.
3º Peso de la regla: una regla con mayor peso prevalecerá sobre otra de menor peso.
Peso = ABC (número de 3 cifras, cada una de las cuales se calcula contando los selectores de cada tipo según se indica a continuación)
A = nº de selectores de ID (selectores que acceden al atributo «id» del elemento mediante «#»)
B = nº de selectores de CLASE (selectores que acceden al atributo «class» del elemento mediante «.»)
C = nº de selectores de HTML (selectores que acceden al tag html)
Ejemplos ordenados de más a menos peso:
#id1 .clase1 a (A=1, B=1, C=1 –> peso = 111)
div#id1 a (A=1, B=0, C=2 –> peso = 102)
.clase1 li.clase2 a (A=0, B=2, C=2 –> peso = 22)
.clase1 (A=0, B=1, C=0 –> peso = 10)
div a (A=0, B=0, C=2 –> peso = 2)
4º Orden de especificación: cuando dos reglas tienen el mismo peso prevalecerá la última regla especificada.
NOTA:
Y por último un detalle a tener en cuenta a la hora de diseñar correos HTML. Los gestores de correo como GMail suelen desactivar los estilos CSS para que no interfieran con sus propios estilos, con lo que solo se respetan los estilos definidos en línea en el código HTML mediante el atributo style, como por ejemplo:
<span style="color:#ff0000;">texto</span>
