CSS ustunlik qoidalari
CSS specificity (aniqlik darajasi)
CSS spetsifikatsiyasi (specificity) — qaysi uslub deklaratsiyasining yakunda elementga qo‘llanilishini aniqlaydigan algoritmdir.
Agar ikki yoki undan ortiq CSS qoidasi bir xil elementga ishora qilsa, eng yuqori spetsifikatsiyaga ega deklaratsiya "g‘alaba qozonadi" va o‘sha uslub HTML elementga qo‘llanadi.
Quyidagi misollarga qarang:
Misol
Bu yerda <p> elementlari uchun qizil rang belgiladik. Natija: Matn qizil bo‘ladi:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Endi keyingi misolga qarang:
Misol
Bu yerda klass selektori ("test" nomli) qo‘shdik va bu klass uchun yashil rang belgiladik. Natija: Matn yashil bo‘ladi, chunki klass selektorining spetsifikatsiyasi yuqoriroq:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Endi keyingi misolga qarang:
Misol
Bu yerda id selektorini ("demo" nomli) qo‘shdik. Natija: Matn ko‘k bo‘ladi, chunki id selektorining spetsifikatsiyasi yuqoriroq:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Endi keyingi misolga qarang:
Misol
Bu yerda <p> elementi uchun inline uslub qo‘shdik. Natija: Matn pushti bo‘ladi, chunki inline uslubning spetsifikatsiyasi eng yuqori:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!