Por que ocorre herança de seletores em CSS?

A herança em CSS ocorre porque as propriedades de estilo podem ser transmitidas dos elementos pai para os seus elementos filhos. Isto é definido pela especificação CSS para simplificar a estilização e evitar a repetição de código.

Nem todas as propriedades CSS são herdadas. Aqui estão alguns exemplos de propriedades herdáveis e não herdáveis:

Propriedades herdáveis	Propriedades não herdáveis
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

O mecanismo de herança é determinado pelo navegador com base na hierarquia dos elementos no documento HTML (árvore DOM). Se um elemento filho não tiver um valor explícito para uma propriedade herdável, ele herda o valor do seu ancestral mais próximo que tenha essa propriedade definida.

/* Atribuir cor vermelha */
body {
  color: red;
}

/* Todos os elementos filhos do body, sem propriedade color definida, serão vermelhos */
p {
  /* Este parágrafo será vermelho */
}

/* Sobrescrever a propriedade color para um elemento específico */
div {
  color: blue;
}

/* O parágrafo dentro deste div será azul */
div p {
  /* Este parágrafo será azul */
}

Usando a herança, pode-se definir estilos comuns para grandes blocos de conteúdo, permitindo que os elementos filhos herdem esses estilos automaticamente, a menos que seja indicado o contrário. Isto melhora a manutenção e a legibilidade do código.