Cómo calcular la especificidad de los selectores CSS

¿Alguna vez ha añadido una nueva regla a la hoja de estilos CSS, pero visto ningún cambio en los resultados en la página en la ventana del navegador? Tal vez el nuevo selector no era lo suficientemente específico para invalidar una regla existente en la hoja de estilos. En este artículo se explicará cómo calcular matemáticamente el peso específico de los selectores CSS.

Instrucciones

1 El W3C utiliza fórmulas matemáticas para determinar el peso de cualquier estilo particular. Cuanto más peso tiene un estilo, el más específico que es.

2 En estricto XHTML (donde no se utilicen los estilos en línea) especificidad se calculó usando sus tres números. Por ejemplo 0, 0, 0. Estas posiciones se denominan a, b, c. No pensar en ellos como números en el sentido normal.

3 El primer número de la izquierda (posición a) es el más importante, o de mayor peso. El primer número de la izquierda es el número de ID en el selector. Identificación gana más puntos en este juego. Un selector con los puntos de identificación es siempre la mayoría de los más específicos:

especificidad de cabecera = 1, 0, 0header #logo especificidad = 2, 0, 0

4 El segundo número representa el número de selectores de clase, pseudo-clase y atributos:
.post_head especificidad = 0, 1, 0

contenido especificidad .post_head = 1, 1, 0

5 El tercer número representa el número de elementos y pseudo-elementos selectores:
p especificidad = 0, 0, 1

contenido de p especificidad = 1, 0, #logo 1header p especificidad = 2, 0, 1

6 Si hay un empate en el número de ID, entonces el selector con la mayoría de las clases gana. Si todavía hay un empate, el selector con el mayor número de elementos gana. Si dos selectores siguen empatados, entonces el conflicto se resuelve por la posición de la regla en la cascada.

7 Un valor en la primera posición siempre tendrá más peso que un valor en cualquier otra posición, no importa qué valores están en otras otras posiciones. Por ejemplo, un valor de 1, 0, 0 todavía tiene una especificidad mayor que un valor de 0, 0, 10.

8 Si se permite que los estilos en línea (como en XHTML de transición), se necesitan entonces cuatro números. El peso de un estilo en línea se da en la primera posición. He aquí algunos ejemplos que utilizan cuatro dígitos:

contenido especificidad = 0, 1, 0, 0content p especificidad = 0, 1, 0, 1

Si un estilo en línea se añadieron en el HTML, decir a un elemento P en el div de contenido, entonces serían los números:
1, 1, 0, 1

En este caso, la especificidad sería mayor para el párrafo con el estilo en línea que para los otros párrafos de la div de contenido, ganando así la batalla especificidad.

Consejos y advertencias

• El uso de una declaración importante en CSS puede derogar ninguna norma que en la cascada.