CSS-тегі ерекшелік ережелері

Алдыңғы мысалда екі селектор да бірдей болды және бірдей басымдыққа ие болды. Бұл дегеніміз, төмен жазылған қасиет жеңіске жетті.

Бет элементіне бірнеше селектор сәйкес келетін жағдайлар да болады. Бұл жағдайда қасиеттер қайшылығы тұрғанда жеңіске жетеді көбірек ерекше, яғни дәлірек селектор. Ерекшелік ережелерін қарастырайық.

Бірінші ереже

Класс әрқашан тег селекторын жеңеді:

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* бұл түс қолданылады */
}

Екінші ереже

Идентификатор әрқашан класты жеңеді:

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* бұл түс қолданылады */
}

Үшінші ереже

Барабар жағдайларда жеңіске жетеді сол селектор, онда бөліктер көбірек. Мысалы, егер бізде екі тег селекторы болса, онда жеңіске жетеді сол, онда тегтер көбірек:

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* бұл түс қолданылады */
}

Егер екі класс селекторы болса, онда жеңіске жетеді сол, онда көбірек класс көрсетілген (егер онда тег селекторлары болса, онда олар әсер етпейді):

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* бұл түс қолданылады */
}