Especificidad en CSS

La especificidad (Specificity) en CSS describe los pesos relativos de los diversos selectores para la resolución de conflictos.

Para entender esto el siguiente ejemplo (en la imagen) es muy claro.

Tenemos en el código, dos declaraciones una que indica que el selector H1 debe tener color rojo, y una clase que aplica el color azul. Mas abajo en el HTML, aplicamos ambas reglas a un mismo elemento. La pregunta es: ¿De que color se va a mostrar el texto dentro de H1?.

Eso lo define la especificidad,  y para encontrar la especificidad se debe seguir este algoritmo:

1. Contar el numero de atributos ID en el selector = a
2. Contar el numero de atributos CLASS  en el selector = b
3. Contar el numero de Tags en el selector = c

La concatenación de los tres números nos da la especificidad.

Para el ejemplo anterior seria:

Selector	a	b	c	Especificidad
h1	0	0	1	1
.titulo	0	1	0	10

Por lo que nuestro ejemplo el título queda con color azul.

Fuente

Reference Sitepoint CSS Specificity