La herencia es la propiedad que tienen algunos objetos de heredar propiedades de sus elementos contenedores. Un ejemplo de herencia
<h1>Club Atlético <span>River Plate</span></h1>
El h1 se va a ver como un titulo normal y el span tendrá el formato de titulo h1 porque lo hereda de su elemento contenedor, que es el h1. El h1 es un elemento que dentro contiene un span y este hereda su forma.
La propiedad inherit es también una forma de declarar herencias. Se aplica a algunas propiedades y permite declarar que un elemento herede el valor de esa propiedad de su contenedor padre o abuelo. Ej:
Tenemos la siguiente barra de navegación hecha en HTML
<nav class="toolbar">
<a href="#">Entradas</a>
<a href="#">Asociate</a>
<a href="#">Iniciar Sesion</a>
</nav>
Definimos que la barra de navegacion con la clase toolbar va a tener un fondo negro y las palabras van a ser rojas. Podriamos hacer esto:
.toolbar {
background-color: blue;
color: white;
}
Esto se debe a que el color de los links por defecto es ese azul. Tenemos que cambiar el color de los links. Podemos escribir que el color de los a será igual a white o podemos usar herencia para indicarle al navegador que busque el valor color de la toolbar y lo ponga en los enlaces. De esta forma quedaria asi
.toolbar {
background-color: black;
color: red;
}
.toolbar a{
color: inherit;
}
Le indicamos que a la hora de definir el color de los enlaces de la toolbar vaya a su contenedor padre (toolbar) y se fije cual es el valor de la propiedad color, que lo tome y se lo aplique a los enlaces, quedando asi.