La especificidad es muy útil para evitar el valor !important dentro de las propiedades CSS o tener que poner unas reglas forzosamente después de otras para que, de ese modo, puedan ser aplicadas.

Como calcular la especificidad de los selectores

Primer paso:

• Contar el número de atributos ID en el selector (=a).
• Contar el número de otros atributos y de pseudo-clases en el selector (=b).
• Contar el número de nombres de elementos en el selector (=c).
• Ignorar pseudo-elementos.

Segundo paso: Concatenación de los tres valores que se han obtenido (abc): si a=1 b=2 y c=0, se obtiene 120.

El ejemplo que da el W3C:

* {} /* a=0 b=0 c=0 -> specificity = 0 */

LI {} /* a=0 b=0 c=1 -> specificity = 1 */

UL LI {} /* a=0 b=0 c=2 -> specificity = 2 */

UL OL+LI {} /* a=0 b=0 c=3 -> specificity = 3 */

H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */

UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */

LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */

#x34y {} /* a=1 b=0 c=0 -> specificity = 100 */

Un ejemplo:

p => a=0 b=0 c=1 => 1
p.clase => a=0 b=1 c=1 => 11
#identificador p.clase => a=1 b=1 c=1 => 111

Y el que de el número más alto es el más específico y el que se acaba aplicando. Si dos selectores tienen la misma especificidad tiene preferencia el que esté después del otro en el archivo CSS.

Ejemplos

En este caso, al ser igual de específicos se aplica el segundo, ya que va después:

p { color: pink; }
p { color: lime; }

En este caso se aplica el primero, que es más específico:

div p { color: pink; }
p { color: lime; }

Referencias y enlaces relacionados:

• Calculando la especificidad en CSS (Estado Beta)
• Assigning property values, Cascading, and Inheritance > The cascade > Calculating a selector’s specificity (W3C, Referencia CSS)
• Specificity (HTML Dog)
• CSS2 and CSS2.1 Specificity Clarified (molly.com)
• Aún más sobre especificidad (5.1.1)