Especificidad CSS

En las hojas de estilo en cascada (CSS) la especificidad hace referencia a cómo se calcula la prevalencia cuando algunas reglas de estilo entran en conflicto.

De las primeras cosas que aprendemos cuando empezamos a trabajar con CSS es que, en caso de declaraciones conflictivas, la posterior sobreescribe a la anterior.
O sea que, en el siguiente ejemplo:

h1 {
  color:red;
}

h1 {
  color:blue;
}


El color del texto dentro de la etiqueta h1 se mostrará de color azul, porque esa segunda declaración sobrescribe a la primera

Selectores de clase

Pero, ¿qué pasa en este otro ejemplo?:

.intro {
  color:red;
}

h1 {
  color:blue;
}


Sí el código HTML fuera este:

<h1 class="intro">Bienvenidos a un nuevo curso</h1>

El texto dentro de la etiqueta h1 se mostrará de color rojo, aunque la regla esté antes de la que lo define a los h1 como azul, porque los selectores de clase (en este caso .intro) tienen prevalencia sobre los selectores de tipo.

Selectores de ID 

Y, en este otro caso:

#comentarios {
  color:green;
}

.intro {
  color:red;
}

h1 {
  color:blue;
}


Sí el código HTML fuera este:

<h1 id="comentarios" class="intro">Las opiniones de nuestros alumnos</h1>

El texto dentro de la etiqueta h1 se mostrará de color verde, aunque la regla esté antes de la que define a los h1 como azul o de la clase .intro que los define como rojo, porque los selectores de ID (en este caso #comentarios) tienen predominancia sobre los selectores de clase.

Estilos en línea

Con la premisa de separar el contenido de la presentación no deberíamos utilizar estilos en línea, pero, llegado el caso, en este código HTML (vinculado a las mismas reglas de estilo del apartado anterior):

<h1 style="color:cyan;" id="comentarios" class="intro">Las opiniones de nuestros alumnos</h1>

...el texto dentro de la etiqueta h1 se mostrará de color cian porque los estilos en línea (los declarados dentro del código HTML con el atributo style en uno de sus elementos) sobreescriben a los demás.

---

Desde los más específicos a los más genéricos, este es el orden de consideración al momento de resolver estilos conflictivos (los que están más arriba en esta lista, sobreescriben a los que están más abajo):

1. Estilos en línea
2. Selectores de ID (#)
3. Selectores de clases (.)
4. Selectores de tipo (h1, p, etc.)

Aunque también existe la posibilidad de agregar la excepción !important en una regla de estilo para darle prioridad sobre cualquier otra. Pero se considerada una mala práctica porque rompe la cascada de las hojas de estilo.
O sea, solo se debería considerar el uso de !important cuando no haya otra forma de conseguir el resultado que se busca.

Por otra parte, estas reglas para calcular la especificidad ignoran completamente al selector universal (*), a los combinadores (+, >, ~) y a la pseudo-clase de negación (:not()).

Para información más detallada sobre este tema fundamental a la hora de escribir hojas de estilo, pueden visitar la mdn web docs o, si entienden inglés, el siguiente video de WebDevSimplified también es muy claro al respecto: