CSSda tanlovchilarning merosxo'rligi nima uchun yuzaga keladi?

CSS'da meros kelib chiqishi shundan iboratki, uslublar xususiyatlari ota elementlardan bolalar elementlariga o'tkazilishi mumkin. Bu CSS spetsifikatsiyasi bilan belgilangan bo'lib, uslublashni soddalashtirish va kodni takrorlashdan qochish uchun mo'ljallangan.

Barcha CSS xususiyatlari meros kelmaydi. Quyida meros keladigan va kelmaydigan xususiyatlarning ba'zi misollari keltirilgan:

Meros keladigan xususiyatlar	Meros kelmaydigan xususiyatlar
text-align	border
color	margin
font-family	padding
font-size	background
line-height	width
list-style-type	height

Meros mexanizmi brauzer tomonidan HTML hujjatidagi (DOM daraxti) elementlar hierarxiyasiga asoslangan holda aniqlanadi. Agar bolalar elementga meros keladigan xususiyat uchun aniq qiymat berilmagan bo'lsa, u bu xususiyatni eng yaqin ajdodidan meros oladi, u bu xususiyatni belgilagan bo'lsa.

/* Rangi qizil qilib belgilash */
body {
  color: red;
}

/* Body ning barcha bolalar elementlari, agar color xususiyati belgilangan bo'lmasa, qizil bo'ladi */
p {
  /* Bu paragraf qizil bo'ladi */
}

/* Maxsus element uchun color xususiyatini qayta belgilash */
div {
  color: blue;
}

/* Bu div ichidagi paragraf ko'k bo'ladi */
div p {
  /* Bu paragraf ko'k bo'ladi */
}

Merosdan foydalanib, katta kontent bloklari uchun umumiy uslublar belgilash mumkin, bu esa bolalar elementlarining avtomatik ravishda ushbu uslublarni qabul qilishiga imkon beradi, agar boshqacha ko'rsatilmagan bo'lsa. Bu kodning saqlanishi va o'qilishi yaxshilanadi.