Explicación el orden de prioridad de CSS

Explicación el orden de prioridad de CSS

Explicación el orden de prioridad de CSS
A la hora de aplicar un color, por poner ejemplo, a un elemento dado y con más de un
atributo al mismo partiremos de la siguiente manera:
1- Siempre se aplica a lo que está definido en la etiqueta
2- En ausencia del primer punto o después del anterior, se aplica a lo que esta definido con un ID
símbolo = "#", del elemento.
3- En ausencia de los anteriores puntos o después de los anteriores, se aplica a lo que esta definido
con un clase símbolo = ".", del elemento.
4- en ausencia de los anteriores puntos o después de ellos, se aplica a lo que esta definido de manera
genérica.
Dicho esto, el ejemplo que tenemos, el orden de prioridad vendría a ser:
<style type="text/css">
h1 { color: pink; }
h1 { color: green;
}
#caja header h1 { color: red; }
#caja .cabecera { color: blue; }
.cabecera { color: yellow;
}
.cabecera h1 { color: orange; }
</style>
<h1 style="color:purple">Cabecera: header</h1>
1 - lo que esta en la etiqueta (color: purple), por pertenecer el atributo directamente al elemento en
cuestión.
2 - ID de "div" que vienen a ser el ascendiente superior al "h1" después del "header". Se aplica esta
prioridad respecto a otra de ID con clase "cabecera", por apuntarse 0 señalar directamente al
elemento en cuestión. En este caso seria (color: red)
3 - Vendría como tercera prioridad la clase ".cabecera" que señala o apunta directamente al
elemento "h1".
4 - atributo del style "h1" (color: green) por tratarse entre los dos elementos "h1" como último de
ambos.
5 - Atributo del style "h1" (color: pink).
6 - ID de "div" con clase ".cabecera" por aplicarse al atributo de forma general a todo el bloque que
comprenda el ID y la clase, en caso de haber mas elementos adentro.
7 - Similar al anterior pero solo partiendo desde la clase ".cabecera" y sin ID.