Чаро меросхўрии селекторҳо дар 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 {
  /* Ин параграф кабуд хоҳад буд */
}

Бо истифода аз масъулшавӣ, метавон услубҳои умумиро барои блокҳои калони мундариҷа муқаррар кард, ки ба таври худкор аз ҷониби унсурҳои фарзанд мегузаранд, агар дигар таъкид нашуда бошад. Ин ба нигоҳдории коди беҳтар ва хонданашавии он кӯмак мекунад.