Ինչու է տեղի ունենում 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 {
  /* Այս պարբերականը կապույտ կլինի */
}

Օգտագործելով ժառանգությունը, կարելի է սահմանել ընդհանուր ոճեր մեծ բովանդակության բլոկների համար, որոնք ավտոմատ կերպով ժառանգվում են երեխաներից, եթե այլ նշում չկա: Սա բարելավում է կոդի պահպանելիությունը և ընթերցանությունը: