Чӣ тавр кор мекунанд афзалиятҳои гуногуни услубҳо дар 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.