CSSda turli uslublar ustuvorligi qanday ishlaydi?

CSS'da uslublarning ustuvorligi kaskad mexanizmi va selecatorlarning aniqrog'i bilan belgilanadi. Asosiy tamoyillar:

1. Aniqlik — bu selektorning og'irligi, ID, sinflar, teglar va boshqa komponentlar soniga qarab hisoblanadi. Qanchalik yuqori bo'lsa, uslub shunchalik ustuvor bo'ladi.

   • ID selektori (#id) yuqori ustuvorlikka ega.
   • Sinflar (.sinfi), atributlar va pseudoselektorlar o'rtacha ustuvorlikka ega.
   • Teglar (div, p) past ustuvorlikka ega.

2. Kaskad — agar ikki qoidaning aniqligi bir xil bo'lsa, kodda keyingi yozilgan qoida qo'llaniladi.

3. !important — uslubga maksimal ustuvorlik qo'shadi, boshqa qoidalarni, yuqori aniqlikka ega bo'lgan boshqa !important qoidalaridan tashqari, ustun qiladi.

4. Merosi — ba'zi xususiyatlar (color, font-family) ota-ona tomonidan meros qilib olinadi, agar ular qayta yozilmagan bo'lsa.

Misol:

#header { color: red; }       /* aniqlik 100 */
.menu { color: blue; }        /* aniqlik 10  */
div { color: green; }         /* aniqlik 1   */

/* Agar elementda id="header" va sinf="menu" bo'lsa, rang qizil bo'ladi */

Shu tarzda, brauzer eng yuqori aniqlikka ega uslubni tanlaydi, tartib va !important mavjudligini hisobga olgan holda.