¿Cómo funcionan las diferentes prioridades de estilos en CSS?

En CSS, las prioridades de los estilos se determinan mediante el mecanismo de cascada y la especificidad de los selectores. Los principios básicos son:

1. Especificidad — es el peso del selector, que se calcula en función de la cantidad de ID, clases, etiquetas y otros componentes. Cuanto mayor sea la especificidad, mayor será la prioridad del estilo.

   • El selector de ID (#id) tiene una alta prioridad.
   • Las clases (.clase), atributos y pseudoclases tienen una prioridad media.
   • Las etiquetas (div, p) tienen una prioridad baja.

2. Cascada — si dos reglas tienen la misma especificidad, se aplica la que se declara más tarde en el código.

3. !important — añade la prioridad máxima al estilo, sobrescribiendo otras reglas, excepto otras !important con mayor especificidad.

4. Herencia — algunas propiedades (por ejemplo, color, font-family) se heredan del elemento padre si no se sobrescriben.

Ejemplo:

#header { color: red; }       /* especificidad 100 */
.menu { color: blue; }        /* especificidad 10  */
div { color: green; }         /* especificidad 1   */

/* Si un elemento tiene id="header" y clase="menu", el color será rojo */

De esta forma, el navegador selecciona el estilo con mayor especificidad, considerando el orden y la presencia de !important.