Cuando encontramos varios selectores anidados, o nesting, podemos calcular su especificidad. Aunque esto raramente tendremos que hacerlo en un proyecto si no se nos va de las manos el CSS (usando metodologías, más adelante en este curso)
Suponemos cuatro números, que corresponden a cada una de las categorías de la página anterior excepto !important que inicializamos a cero. Están ordenados por orden de precedencia, de modo que el número de la izquierda es el más importante, y el de la derecha el menos importante.
Ejemplos:
p {
/* 0 0 0 1 */
}
.container span {
/* 0 0 0 1 */
}
div p {
/* 0 0 0 2 */
}
a[href$='.pdf'] {
/* 0 0 1 1 */
}
.container img:hover {
/* 0 0 2 1 */
}
#color {
/* 0 1 0 0 */
}
.container #color {
/* 0 1 1 0 */
}
#color span {
/* 0 1 0 1 */
}
<span style="color: red">Test</span> /* 1 0 0 0 */