38. حساب التخصيص: ID و Class و Type
التخصيص (Specificity) هو درجة تُعطى لمحدد CSS تحدد مدى 'قوته'. تعني درجة التخصيص الأعلى أن القاعدة ستلغي القواعد ذات الدرجات الأقل.
تسلسل التخصيص الهرمي (A, B, C, D)
يحسب المتصفح الدرجة بناءً على عدد كل نوع من المحددات الموجودة:
- A: الأنماط المضمنة (Inline Styles) (الأعلى، بقيمة 1000 نقطة - استخدمها بحذر).
- B: محددات المعرف (ID Selectors) (
#id) (بقيمة 100 نقطة). - C: محددات الفئة والسمات والفئات الزائفة (
.class,[attr],:hover) (بقيمة 10 نقاط). - D: محددات النوع والعناصر الزائفة (
p,h1,::before) (بقيمة نقطة واحدة).
| المحدد | الدرجة (A, B, C, D) | الدرجة الناتجة |
|---|---|---|
p | (0, 0, 0, 1) | 1 |
.alert | (0, 0, 1, 0) | 10 |
p.alert | (0, 0, 1, 1) | 11 |
#header | (0, 1, 0, 0) | 100 |
#header .logo | (0, 1, 1, 0) | 110 |
style="..." | (1, 0, 0, 0) | 1000 |
مثال على التضارب
css /* القاعدة 1: الدرجة 1 (0,0,0,1) */ p { color: red; }
/* القاعدة 2: الدرجة 10 (0,0,1,0) */ .text-green { color: green; }
/* مطبق على:
مرحباً
/ / النتيجة: الأخضر (GREEN) يفوز لأن 10 > 1 */التخصيص ليس مجرد مجموع حسابي بسيط. يمكنك الحصول على 100 محدد فئة (1000 نقطة في العمود C) ولكن محدد معرف واحد (100 في العمود B) سيظل هو الفائز.