Compartir a través de

Orden en cascada y especificidad

  • Artículo

Es habitual que haya reglas en conflicto en las hojas de estilos en cascada que permitan aplicar estilos de distintas fuentes de hojas de estilos a un elemento de un documento HTML.

Si se aplican dos o más declaraciones al mismo elemento, puede haber un conflicto entre ellas. Comprender cómo se aplican las reglas de hojas de estilos en cascada a un elemento puede ayudarle a solucionar errores de formato.

Herencia

Todos los elementos de una página HTML están presentes en algún lugar del árbol DOM (Document Object Model), cuya raíz es el elemento HTML. Los elementos a los que se pueden aplicar reglas de hojas de estilos en cascada casi siempre pertenecen al elemento BODY. Todos los elementos, empezando por el elemento BODY, pueden tener aplicado un estilo. En la mayoría de los casos, los elementos heredan el estilo del elemento primario en DOM.

Un elemento P sin formato hereda los estilos configurados para el elemento primario, el elemento BODY. Un elemento definido con <p class="style1"> hereda los estilos del elemento primario y el estilo definido para su clase en la hoja de estilos, en la regla p.style1. Si hay un conflicto entre el estilo del elemento primario y la regla de estilo de la hoja de estilos, tiene prioridad la regla de la hoja de estilos p.style1.

Por ejemplo, si la hoja de estilos contiene una regla para p que establece el color en rojo (p { color: #F00; }), además de una regla para p.style1 que configura el color como azul (p.style1 { color: #00F; }), el texto del elemento <p class="style1"> aparecerá en azul.

Orden de prioridad

Las reglas de estilo se aplican en el orden en que aparecen. Por ejemplo, si una página HTML contiene tanto un vínculo a una hoja de estilos externa como una definición de estilo en conflicto en el encabezado de página, se aplican en primer lugar las reglas de la hoja de estilos y, después, las reglas de estilo definidas en el encabezado de la página, que sobrescriben todas las reglas definidas en la hoja de estilos externa.

Si una página contiene un vínculo a dos hojas de estilos externas, las reglas de la segunda hoja tendrán prioridad sobre las de la primera.

Las reglas de estilo se aplican en el siguiente orden:

  1. Referencia a hojas de estilos externas:

    Si hay reglas en conflicto en una hoja de estilos externa, tiene prioridad la última instancia.

    Si hay varias hojas de estilos externas, la reglas se aplican en el orden en que están enumeradas las hojas. Por ejemplo, si una página incluye vínculos a tres hojas de estilos, las reglas de la segunda hoja tendrán prioridad sobre las reglas en conflicto de la primera hoja, y las reglas en conflicto de la tercera hoja tendrán prioridad sobre las de la primera y segunda hojas.

  2. Declaraciones de estilo en el encabezado de página HTML:

    Si hay conflictos en las reglas de estilo del encabezado de página, tiene prioridad la última instancia.

  3. Declaraciones de estilo en línea en la página HTML:

    Si una etiqueta HTML contiene una regla de estilo explícita (por ejemplo, <p style=color:#0F0;">), la regla definida en la etiqueta tendrá prioridad sobre las reglas del encabezado de página HTML y las reglas de hojas de estilos externas.

A causa del orden de prioridad, los selectores de pseudoclase :link se deben declarar en el siguiente orden para que funcionen correctamente:

a:link {}
a:visited {}
a:hover {}
a:active {}