Ինչպես են աշխատում CSS-ում տարբեր ոճերի առաջնահերթությունները։

CSS-ում ոճերի առաջնահերթությունները որոշվում են կասկադ մեխանիզմով և սելեկտորների հատուկ նշանակությամբ։ Հիմնական սկզբունքներն են՝

1. Հատուկ նշանակություն — դա սելեկտորի քաշն է, որը հաշվարկվում է ID-ների, դասերի, տեգերի և այլ բաղադրիչների քանակի հիման վրա։ Որքան բարձր է հատուկ նշանակությունը, այնքան ավելի բարձր է ոճի առաջնահերթությունը։

   • ID սելեկտորը (#id) ունի բարձր առաջնահերթություն։
   • Դասերը (.դաս), հատկությունները և псևոդոսելեկտորները ունեն միջին առաջնահերթություն։
   • Տեգերը (div, p) ունեն ցածր առաջնահերթություն։

2. Կասկադ — եթե երկու կանոն ունեն նույն հատուկ նշանակություն, կիրառվում է այն, որը հայտարարվել է ավելի ուշ կոդում։

3. !important — ավելացնում է առավելագույն առաջնահերթություն ոճին, վերագրելով մյուս կանոններին, բացառությամբ այլ !important-ների, որոնք ունեն ավելի բարձր հատուկ նշանակություն։

4. Երասխականություն — որոշ հատկություններ (color, font-family) ժառանգվում են ծնողից, եթե չեն վերանայվել։

Օրինակ՝

#header { color: red; }       /* հատուկ նշանակություն 100 */
.menu { color: blue; }        /* հատուկ նշանակություն 10  */
div { color: green; }         /* հատուկ նշանակություն 1   */

/* Եթե տարրն ունի id="header" և դաս `menu`, գույնը կկազմի կարմիր */

Այսպիսով, բրաուզերը ընտրում է բարձրագույն հատուկ նշանակությամբ ոճը, հաշվի առնելով կարգը և !important-ի առկայությունը։