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.

Propiedad inherit

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;
}

Captura de Pantalla 2022-09-13 a la(s) 00.59.42.png

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.

Captura de Pantalla 2022-09-13 a la(s) 01.02.34.png