Защо се случва наследяване на селектори в CSS?

Наследяването в CSS се случва, защото свойствата на стиловете могат да се предават от родителските елементи към техните деца. Това е определено от спецификацията на CSS, за да се улесни стилизирането и да се избегне повторението на кода.

Не всички CSS свойства се наследяват. Ето някои примери за наследими и ненаследими свойства:

Наследими свойства	Ненаследими свойства
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Механизмът на наследяване се определя от браузъра въз основа на йерархията на елементите в HTML документа (DOM дървото). Ако на дете елемент не е зададена явно стойност за наследимо свойство, то наследява стойността от най-близкия предшественик, който има това свойство дефинирано.

/* Задаване на цвят червен */
body {
  color: red;
}

/* Всички дете елементи на body, които нямат дефинирано свойство color, ще бъдат червени */
p {
  /* Този параграф ще бъде червен */
}

/* Презаписване на свойството color за конкретен елемент */
div {
  color: blue;
}

/* Параграфът вътре в този div ще бъде син */
div p {
  /* Този параграф ще бъде син */
}

Използвайки наследяването, могат да се задават общи стилове за големи блокове съдържание, които автоматично се наследяват от децата, освен ако не е указано друго. Това подобрява поддръжката и четливостта на кода.