Dlaczego dochodzi do dziedziczenia selektorów w CSS?

Dziedziczenie w CSS zachodzi, ponieważ właściwości stylu mogą być przekazywane od elementów nadrzędnych do ich elementów potomnych. Jest to określone przez specyfikację CSS, aby upraszczać stylizację i unikać powtarzania kodu.

Nie wszystkie właściwości CSS są dziedziczone. Oto niektóre przykłady właściwości dziedzicznych i niedziedzicznych:

Właściwości dziedziczne	Właściwości niedziedziczne
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Mechanizm dziedziczenia jest określany przez przeglądarkę na podstawie hierarchii elementów w dokumencie HTML (drzewo DOM). Jeśli element potomny nie ma przypisanej jawnie wartości dla właściwości dziedzicznej, dziedziczy wartość od najbliższego przodka, u którego ta właściwość jest zdefiniowana.

/* Ustaw kolor na czerwony */
body {
  color: red;
}

/* Wszystkie elementy potomne body, które nie mają zdefiniowanej właściwości color, będą czerwone */
p {
  /* Ten akapit będzie czerwony */
}

/* Nadpisz właściwość color dla konkretnego elementu */
div {
  color: blue;
}

/* Akapit wewnątrz tego div będzie niebieski */
div p {
  /* Ten akapit będzie niebieski */
}

Używając dziedziczenia, można ustawiać wspólne style dla dużych bloków treści, pozwalając elementom potomnym automatycznie je przejmować, jeśli nie jest to wyraźnie wyłączone. To zwiększa łatwość utrzymania i czytelność kodu.