Чаро интихобкунандагони CSS зиёд мерос мегиранд?

Селекторҳо дар CSS мерос намеёбанд. Мерос дар CSS ба интиқоли баъзе хусусиятҳои элемент ба фарзандони он дахл дорад. Селекторҳо намунаҳое мебошанд, ки элементҳоро барои татбиқи услубҳо интихоб мекунанд.

Мерос метавонад маънои онро дошта бошад, ки услубҳое, ки бо истифода аз як селектор татбиқ шудаанд, метавонанд аз ҷониби услубҳое, ки бо истифода аз селектори дигар татбиқ шудаанд, болои онҳо гузошта шаванд (мерос мегиранд). Ин бо меросгардонии оддӣ алоқаманд нест, балки бо механизми cascade-и CSS, ки муайян мекунад, ки кадом услубҳо ба элемент татбиқ мешаванд, вақте ки чанд қоидаҳои CSS арзиш барои як хусусияти якхела муқаррар мекунанд.

Факторҳое, ки ба cascade ва "болои он гузоштани" услубҳо таъсир мерасонанд:

1. Муҳимият (Specificity): Селекторҳо бо махсусияти баландтар вазни бештар доранд.
2. Тартиб (Order): Дар ҳолати махсусияти баробар, қоидае, ки охирин эълон шудааст, татбиқ мешавад.
3. Маҳдудият (!important): Эълонҳое, ки бо !important нишон дода шудаанд, дорои афзалияти баландтарин мебошанд (ғайр аз услубҳои дарунсохти User Agent бо !important).
4. Манбаъҳои услуб (Origin): Услубҳо аз манбаъҳои гуногун меоянд (браузер, корбар, муаллиф).

Масалан, махсусият:

/* Маҳдудияти паст */
p {
  color: blue;
}

/* Маҳдудияти баланд - рангро болои он мегузорад */
.text-section p {
  color: red;
}