كيف يتم حساب خصوصية CSS؟

Question

IT Interview Practice · Accepted Answer

عندما تستهدف قواعد متعددة نفس العنصر، **الخصوصية** تحدد أيها ستفوز. إنها درجة محسوبة من أجزاء المحدد، وتُقارن كصف `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

قارن من اليسار إلى اليمين؛ العمود الأول الذي يختلف يحدد الفائز.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## القواعد الأساسية

- معرّف **id** واحد يفوق أي عدد من **الفئات**؛ فئة واحدة تفوق أي عدد من العناصر. (لا يمكنك "جمع" مستويات أدنى للفوز على مستوى أعلى.)
- إذا كانت الخصوصية **متساوية**، القاعدة التي تظهر **لاحقًا** في المصدر تفوز (ترتيب المصدر).
- **`!important`** يتجاوز الخصوصية العادية بالكامل — حل أخير يصعب تجاوزه (ستحتاج إلى `!important` آخر بخصوصية أعلى).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## التوجيهات العملية

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## لماذا يهم

معظم إحباطات "لماذا لا يتم تطبيق CSS الخاص بي؟" هي نتيجة صراع خصوصية — قاعدة أكثر تحديدًا في مكان آخر تفوز.
be المحددات منخفضة ومسطحة (فضّل الفئات الفردية، تجنب ids و`!important`) يحافظ على الخصوصية يمكن التنبؤ بها، بحيث تبقى الأنماط سهلة التجاوز والصيانة.

القواعد الأساسية

التوجيهات العملية

لماذا يهم

أسئلة ذات صلة