Especificidad de los selectores

<< !important Orden >>

La especificidad es uno de los criterios más importantes de CSS. Es un peso que se le da a una declaración CSS determinada por el tipo de selector usado. Cuando varias declaraciones tienen igual especificidad entonces se aplica al elemento la última declaración encontrada. La especificidad sólo se aplica cuando el mismo elemento es objetivo de múltiples declaración.

La siguiente lista determina la especificidad:

estilos aplicados mediante un atributo style
Número de veces que aparece un id en el selector
Número de veces que aparece una clase, pseudoclase o atributo en el selector.
Número de veces que aparece un elemento o pseudoelementos en el selector

Para saber por tanto la prioridad, debemos ordenarlos teniendo en cuenta los valores de izquierda a derecha:

                                   /* Especificidad: style, id, class/atributo, elemento */
div{…}                             /* Especificidad: 0, 0, 0, 1 */
div div{…}                         /* Especificidad: 0, 0, 0, 2 */
#page div{…}                       /* Especificidad: 0, 1, 0, 1 */
#page div:hover{…}                 /* Especificidad: 0, 1, 1, 1 */
#page div:hover a{…}               /* Especificidad: 0, 1, 1, 2 */
#page .sel:hover>a{...}            /* Especificidad: 0, 1, 2, 1 */

div{ /* Especificidad: 0, 0, 0, 1 */
    color: red;
    padding: 8px;
}
#mensaje{ /* Especificidad: 0, 1, 0, 0 */
    color: orange;
}
div#mensaje{ /* Especificidad: 0, 1, 0, 1 */
    color: blue;
}
div#mensaje:hover{ /* Especificidad: 0, 1, 1, 1 */
    color: pink;
}
div.error:hover::before{ /* Especificidad: 0, 0, 2, 2 */
    color: green;
    content:'🍕';
}

<< !important Orden >>