حاسبة أولوية CSS تتيح لك إدخال أي محدد CSS ورؤية درجة أولويته فورًا مقسمة إلى أبعاد ID و Class و Element. تدعم المقارنة جنبًا إلى جنب لمحددين مع اكتشاف تلقائي للفائز بالأولوية، بالإضافة إلى أمثلة محددات شائعة ومرجع قواعد الأولوية.
الميزات الرئيسية
حساب درجة الأولوية فورًا أثناء الكتابة
تفصيل مرئي لأوزان ID و Class و Element
مقارنة جنبًا إلى جنب للمحددات مع عرض علامة الفائز تلقائيًا
أمثلة محددات شائعة قابلة للتعبئة بنقرة واحدة
مرجع قواعد الأولوية مع عرض مرمز بالألوان
دعم محددات ID و Class و Attribute و Pseudo-class و Pseudo-element
معاينة سريعة
حالات الاستخدام
تصحيح تعارضات CSS ومشاكل تجاوز الأنماط
مقارنة أولوية المحددات قبل كتابة القواعد
تعلم وتعليم قواعد أولوية CSS بمساعدة مرئية
تحسين هيكل وقابلية صيانة أوراق الأنماط
التحقق من أن المحددات تتبع أفضل ممارسات الأولوية
cssspecificityselector
الأسئلة الشائعة
ما هي أولوية CSS؟
أولوية CSS هي نظام تسجيل يحدد أي قواعد CSS تسري عندما تشير محددات متعددة إلى نفس العنصر. تحسب الأوزان بناءً على أنواع المحددات: محددات ID لها أعلى وزن، تليها محددات class و attribute، وأخيرًا محددات العناصر.
كيف تُحسب الأولوية؟
تُحسب الأولوية كدرجة من ثلاثة أجزاء (ID، Class، Element). كل محدد ID يضيف 1 في عمود ID، وكل محدد class أو attribute أو pseudo-class يضيف 1 في عمود Class، وكل محدد عنصر أو pseudo-element يضيف 1 في عمود Element.
هل يتجاوز !important الأولوية؟
نعم، إعلان !important يتجاوز جميع حسابات الأولوية العادية. عندما تتعارض قواعد !important متعددة، تسري القاعدة ذات الأولوية الأعلى. الأنماط المضمنة (inline) تتجاوز أيضًا جميع الأولويات القائمة على المحددات.
هل يمكنني مقارنة محددين جنبًا إلى جنب؟
نعم، توفر الأداة لوحة مقارنة جنبًا إلى جنب حيث يمكنك إدخال محددين ورؤية أيهما له أولوية أعلى فورًا. تظهر علامة الفائز تلقائيًا بجانب المحدد ذي الدرجة الأعلى.
ما أنواع المحددات التي تدعمها الحاسبة؟
تدعم الحاسبة محددات ID ومحددات class ومحددات attribute ومحددات pseudo-class (مثل :hover و :nth-child) ومحددات العناصر ومحددات pseudo-element (مثل ::before و ::after). كما توفر أمثلة شائعة يمكن تعبئتها بنقرة واحدة.