اولویت قوانین (Specificity)

درک کامل Specificity در CSS — کدام قانون برنده می‌شود و چرا

اولویت (Specificity) چیست؟

وقتی چند قانون CSS به یک عنصر اعمال می‌شود، CSS باید تصمیم بگیرد کدام برنده است. این تصمیم بر اساس سیستمی به نام Specificity (اولویت) گرفته می‌شود.

سلسله‌مراتب اولویت

اولویتنوعمثالامتیاز
۱ (بالاترین)!importantcolor: red !important۱۰۰۰۰
۲ (بسیار بالا)Inline stylestyle="..."۱۰۰۰
۳ (بالا)ID#header۱۰۰
۴ (متوسط)Class/Attribute/Pseudo-class.btn, [type], :hover۱۰
۵ (پایین)Element/Pseudo-elementp, ::before۱
۶ (پایین‌ترین)Universal*۰

محاسبه امتیاز

*              → 0,0,0,0
    p              → 0,0,0,1
    p.intro        → 0,0,1,1
    div p.intro    → 0,0,1,2
    #header        → 0,1,0,0
    #header .nav   → 0,1,1,0
    #header a:hover → 0,1,1,1

مثال‌های عملی

/* کدام برنده است؟ */
    p              { color: black; }  /* 0,0,0,1 */
    p.text         { color: blue; }   /* 0,0,1,1 — برنده ✅ */
    #content p     { color: green; }  /* 0,1,0,1 — برنده ✅ */

قوانین مساوی

اگر دو قانون امتیاز برابر داشته باشند، آخری برنده است:

.btn { color: red; }
    .btn { color: blue; }  /* برنده — آخر است */

افزودن اولویت عمدی

/* افزایش بدون ID */
    .my-class.my-class { }  /* دو بار کلاس = ۲۰ امتیاز */
    
    /* با :is() یا :where() */
    :is(.btn, #main) { }    /* بالاترین امتیاز */

ترتیب منابع CSS

ترتیبمنبع
۱استایل پیش‌فرض مرورگر
۲استایل کاربر
۳استایل توسعه‌دهنده
۴Inline style
۵!important

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط