De ce are loc moștenirea selectorilor în CSS?

Moștenirea în CSS are loc deoarece proprietățile de stil pot fi transmise de la elementele părinte la elementele lor copil. Acest lucru este definit de specificația CSS pentru a simplifica stilizarea și a evita repetarea codului.

Nu toate proprietățile CSS sunt moștenite. Iată câteva exemple de proprietăți moștenite și nemoștenite:

Proprietăți moștenite	Proprietăți nemoștenite
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Mecanismul de moștenire este determinat de browser pe baza ierarhiei elementelor din documentul HTML (arborele DOM). Dacă unui element copil nu i se atribuie o valoare explicită pentru o proprietate moștenită, acesta moștenește valoarea de la cel mai apropiat strămoș care are această proprietate definită.

/* Atribuim culoarea roșie */
body {
  color: red;
}

/* Toate elementele copil ale body, fără proprietatea color definită, vor fi roșii */
p {
  /* Acest paragraf va fi roșu */
}

/* Suprascriem proprietatea color pentru un element specific */
div {
  color: blue;
}

/* Paragraful din interiorul acestui div va fi albastru */
div p {
  /* Acest paragraf va fi albastru */
}

Folosind moștenirea, se pot seta stiluri comune pentru blocuri mari de conținut, permițând elementelor copil să le preia automat, dacă nu se specifică altfel. Acest lucru îmbunătățește întreținerea și lizibilitatea codului.