Regla que aplica CSS y el navegador van a tener tres puntos importantes para decidir que estilos van a aplicar.
La importancia es uno de los conceptos más importantes. xd
Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidirá cuál se debe aplicar. Si las reglas tienen la misma especificidad. El orden de las fuentes controla el resultado final.
Orden de carga de los estilos:
Hoja de estilo de agente de usuario (estilos del navegador).
El navegador carga los estilos de forma distinta, primero él va a aplicar sus propios estilos que tiene para las etiquetas. Cuando se cargue nuestro proyecto el navegador va a cargar en primer lugar sus estilos.
Declaración de las normas de los estilos de los developers, todos los archivos .css que vamos a generar.
En pocas palabras los estilos que nostros trabajamos.
Se aplican los estilos que tengan un !important, al final en nuestra hoja de estilos.
No es buena práctica aplicar el !important, es una super mala práctica porque puede romper cosas o puede provocar mal funcionamientos de nuestros estilos.
En columna de "especificidad" la importancia que le pone el navegador a cada selector va de manera descendente siendo el de menor jerarquía aquellos que se encuentran hacia la derecha y los que están hacia la izquierda son los más importantes para el navegador.