Cabecera: header

Módulo 1, ejercicio opcional 2:

Se han creado diferentes selectores, cada uno de ellos aplicando un color de fuente a los titulares h1


		
		#caja .cabecera h1 {
		color:red
		}
		header .titular {
			color:pink;
		}
		.cabecera .titular{
			color:yellow;
		}	
		
		.titular {
			color:blueviolet;
		}
		
		h1{
			color:orange;
			
		}

Estilos y prioridades
Selector	Color	Puntuación
`#caja .cabecera h1`	red	(0,1,1,1)
`header .titular`	pink	(0,0,1,1)
`.cabecera .titular`	yellow	(0,0,2,0)
`.titular`	blueviolet	(0,0,1,0)
`h1`	orange	(0,0,0,1)

Se puede ver que el color rojo se ha aplicado en el primer titular mientras que el segundo queda con el azul violáceo, y el color amarillo, el naranja y el rosa no se llegan a utilizar

Por supuesto, esto está causado por las diferentes prioridades basadas en la puntuación de cada selector. El primer selector de la tabla es el más específico y por tanto es el que se aplica por encima de los otros al primer titular, mientras que el color azul violáceo se aplica al segundo titular, porque aunque hay otros selectores con más prioridad, en realidad no son aplicables a ese titular, ya que no es descendiente de header ni de un elemento con clase "cabecera". Por su parte, el color naranja, es el menos específico de todos ya que su selector solo está definido por la marca del elemento