Oldingi misolda ikkala selektor ham bir xil va bir xil ustuvorlikka ega edi. Bu pastroqda yozilgan stil ustuvorligini anglatadi.
Bir sahifa elementiga bir nechta selektor mos keladigan holatlar ham mavjud. Bunday holda, xususiyatlar ziddiyatli bo'lsa, ya'ni aniqroq selektor g'alaba qozonadi. Keling, o'ziga xoslik qoidalarini ko'rib chiqaylik.
Birinchi qoida
Class har doim selektor tegidan ustuvordir.
<p class="text">text</p>
p {
color: red;
}
.text {
color: green; /* применится этот цвет */
}
Ikkinchi qoida
Id har doim classdan ustuvor bo'ladi.
<p id="elem" class="text">text</p>
.text {
color: red;
}
#elem {
color: green; /* применится этот цвет */
}
Uchinchi qoida
Teng sharoitlarda eng ko'p qismlarga ega bo'lgan selektor ustuvor xisoblanadi. Misol uchun, agar bizda ikkita teg selektor mavjud bo'lsa, ko'proq tegga ega bo'lgani ustuvor xisoblanadi.
<div>
<p>text</p>
</div>
p {
color: red;
}
div p {
color: green; /* применится этот цвет */
}
Agar ikkita class selektori bo'lsa, unda ko'proq classga ega bo'lgani ustuvor xisoblanadi (agar teg selektorlari mavjud bo'lsa, ular hech qanday ta'sir qilmaydi).
<div class="block">
<p class="text">text</p>
</div>
.text {
color: red;
}
.block .text {
color: green; /* применится этот цвет */
}