Қоидаҳои спецификӣ дар CSS

Дар мисоли қаблӣ ҳарду интихобкунанда якхела буданд ва афзалияти якхела доштанд. Ин маъно дорад, ки хосияте, ки дар поён навишта шуда буд, пирӯз мешавад.

Ҳолатҳое низ ҳастанд, ки як элемент саҳифа ба якчанд интихобкунанда мувофиқат мекунад. Дар ин ҳолат, дар ҳолати зиддияти хосиятҳо, интихобкунандаи бештар спецификӣ, яъне интихобкунандаи дақиқтар пирӯз хоҳад шуд. Биёед қоидаҳои спецификатсиро баррасӣ кунем.

Қоидаи якум

Синф ҳамеша интихобкунандаи тегро пирӯз мекунад:

<p class="text">матн</p>

p {
	color: red;
}
.text {
	color: green; /* ин ранг татбиқ карда мешавад */
}

Қоидаи дуюм

Идентификатор ҳамеша синфро пирӯз мекунад:

<p id="elem" class="text">матн</p>

.text {
	color: red;
}
#elem {
	color: green; /* ин ранг татбиқ карда мешавад */
}

Қоидаи сеюм

Дар шароити баробар, интихобкунандае пирӯз мешавад, ки қисмҳои бештар дорад. Масалан, агар мо ду интихобкунандаи тегҳо дошта бошем, пас он пирӯз мешавад, ки тегҳои бештар дорад:

<div>
	<p>матн</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* ин ранг татбиқ карда мешавад */
}

Агар ду интихобкунандаи синфҳо бошад, пас он пирӯз мешавад, ки дар он синфҳои бештар муайян карда шудаанд (агар онҳо интихобкунандаҳои тегҳо бошанд, пас онҳо таъсир намерасонанд):

<div class="block">
	<p class="text">матн</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* ин ранг татбиқ карда мешавад */
}