مشكلة الأولوية هي في الواقع مشكلة حل تعارض. عندما يتم تحديد نفس العنصر (أو المحتوى) بواسطة محدد CSS، يجب اختيار قواعد CSS مختلفة وفقًا للأولوية.
الأول هو خصوصية قواعد CSS. يحتوي CSS2.1 على مجموعة من طرق حساب الخصوصية، والتي يتم تمثيلها بسلسلة أرقام مكونة من أربعة أرقام (CSS2 مكونة من ثلاثة أرقام). خاصة القاعدة في الأولوية ستكون أكثر فائدة عند إصدار الأحكام. فيما يتعلق بالحساب المحدد للخصوصية، هناك القواعد العامة التالية للجمع الرقمي في مواقف مختلفة:
لكل محدد معرف (#someid)، أضف 0,1,0,0.
يضيف كل محدد فئة (.someclass)، وكل محدد سمة (يتم تشكيله مثل [attr = "]، وما إلى ذلك)، وكل فئة زائفة (يتم تشكيلها مثل: hover، وما إلى ذلك) 0، 0، 1، 0
إلى كل عنصر أو العناصر الزائفة (:firstchild)، وما إلى ذلك، تضيف 0,0,0,1
. وتشمل المحددات الأخرى المحدد العام *، وتضيف 0,0,0,0. وهو يعادل عدم إضافته، ولكن هذا أيضاً نوع من الخصوصية، سيتم شرحه لاحقاً.
وفقًا لهذه القواعد، تتم إضافة سلاسل الأرقام شيئًا فشيئًا للحصول على الخصوصية المحسوبة النهائية، ثم تتم مقارنتها شيئًا فشيئًا بالترتيب من اليسار إلى اليمين عند المقارنة والاختيار.
دعونا نعطي بعض الأمثلة:
h1 {اللون: أحمر؛}
/* هناك مكافأة للعنصر العادي واحدة فقط، والنتيجة هي 0,0,0,1 */
الجسم h1 {اللون: أخضر؛}
/* أضف عنصرين عاديين، والنتيجة هي 0,0,0,2 */
--الأخير يفوز
بـ h2.grape {color: purple;}
/* تمت إضافة عنصر عادي ومحدد الفئة، وكانت النتيجة 0,0,1,1*/
h2 {اللون: فضي؛}
/*عنصر عادي، والنتيجة هي 0,0,0,1 */
--الأول يفوز
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7 عناصر عادية، محدد سمة واحد، محددان آخران، والنتيجة هي 0,0,1,7 */
لي#الإجابة {اللون: كحلي؛}
/* محدد المعرف، محدد عادي، والنتيجة هي 0,1,0,1 */
-الأخير يفوز
بالإضافة إلى الخصوصية، هناك بعض
أنماط الأنماط الأخرى داخل نص القاعدة لها أولوية 1,0,0,0، لذا فهي دائمًا أعلى من التعريفات الخارجية. هنا، تشير الأنماط داخل النص إلى الأنماط التي تبدو مثل <div style="color: red">blah</div>، بينما تشير التعريفات الخارجية إلى القواعد المحددة عبر علامات <link> أو <style>.
هناك! قواعد إعلان مهمة قبل كل شيء.
إذا تعارضت التصريحات الهامة، تتم مقارنة الأسبقية.
إذا كانت الأولويات هي نفسها، فسيتم تحديدها بالترتيب الذي تظهر به في الكود المصدري، مع إعطاء الأولوية للأولويات اللاحقة.
لا تحتوي الأنماط المشتقة من الوراثة على حسابات خصوصية، وهي أقل من جميع القواعد الأخرى (مثل تلك المحددة بواسطة المحدد العام *).
فيما يتعلق بالأنماط الخارجية المحملة عبر @import، نظرًا لأن @import يجب أن يظهر قبل جميع تعريفات القواعد الأخرى (إذا لم يكن الأمر كذلك، فيجب على المتصفح تجاهله)، لذلك وفقًا لمبدأ أسبقية الحضور، ستسود تعارضات الأولوية بشكل عام.
يجب أن أذكر هنا أن IE يمكنه التعرف على @import في الموضع الخاطئ، ولكن بغض النظر عن مكان وجود @import، فإنه يعتبره قبل جميع تعريفات القواعد الأخرى، مما قد يسبب بعض سوء الفهم.
لذلك، على الرغم من أن مسألة الأولوية تبدو بسيطة، إلا أنه لا تزال هناك آلية معقدة للغاية وراءها، الأمر الذي يتطلب المزيد من الاهتمام.