Cabecera: header

Código CSS

Prioridad en CSS

Hay que calcular la tupla (A, B, C, D) ganadora de todas las reglas CSS que compiten. A tiene máximo peso y D mínimo. Si hay empate en A, se mira B y así sucesivamente.

Le agregue una letra más, para hacer referencia a la etiqueta !important que le dara mayor prioridad sobre las demas

• E = estilo !importan
• A = estilo en línea
• B = número de IDs
• C = número de clases
• D = número de marcas HTML

.cabecera h1{
color: blue; /* A=0,B=0,C=1,D=1 PUNTUACION: 0,0,1,1*/
}
	
#caja .cabecera h1{
	color: red; /* A=0,B=1,C=1,D=1 PUNTUACION: 0,1,1,1*/
}

h1 {
	color: orange; /* A=0,B=0,C=0,D=1 PUNTUACION: 0,0,0,1*/
}

div header h1{
	color: pink; /* A=0,B=0,C=0,D=3 PUNTUACION: 0,1,1,1*/
}

#caja .cabecera h1 {
	color: green; !important /* E=1,A=0,B=1,C=1,D=1 PUNTUACION: 1,0,1,1,1*/  GANADORA
}

<h1 style="{color: yellow; /* A=0,B=0,C=0,D=1 PUNTUACION: 1,0,0,0*/ }">