عندما تستهدف قواعد متعددة نفس العنصر، الخصوصية تحدد أيها ستفوز. إنها درجة محسوبة من أجزاء المحدد، وتُقارن كصف (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) يحافظ على الخصوصية يمكن التنبؤ بها، بحيث تبقى الأنماط سهلة التجاوز والصيانة.