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; /* бул түс колдонулат */
}