Definición
La especificidad indica qué selectores tienen más jerarquía y, por tanto, cuál es el estilo aplicado cuando hay varias reglas apuntando a un mismo elemento.
Ejemplo
Soy un texto
Todos los elementos que no tienen selector concreto
heredan los estilos del padre (body), pero 'Soy un texto' sí que tiene un selector de clase (.title) y
su especificidad es mayor, por lo que adopta los estilos indicados.
Si se le aplicase una font-family directamente a la clase .title, ésta prevalecería sobre la que
actualmente está recibiendo por el selector de etiqueta h4.
Si se le asigna un id a 'Soy un texto' y se le da la propiedad color: purple, se pondría de color
purple, ya que los selectores por id tienen mayor especificidad que los de clase.
La herencia tiene una baja especificidad. Usar inherit provoca que forzosamente se hereden los
estilos del padre, sobreescribiendo así cualquier estilo por defecto del navegador.
Clases vs ID's
Para estilizar, mejor usar las clases, ya que los ID's solo se puede utilizar uno por página y tienen otros usos más convenientes que para estilizar.Por ejemplo, si una
section tiene el id="section1", al
clickar en una etiqueta a con href="#section1", nos llevará a esa sección.