قم بتفسير أولوية CSS لك

قبل الحديث عن أولوية CSS، علينا أن نفهم ما هو CSS وفيم يُستخدم.

أولاً، دعونا نعطي شرحًا موجزًا ​​عن CSS: CSS هو اختصار لـ Cascading Style Sheets. وتمثل مواصفاته مرحلة فريدة من التطور في تاريخ الإنترنت. في الوقت الحاضر، بالنسبة للأصدقاء الذين يشاركون في إنتاج صفحات الويب، يجب أن يكون هناك عدد قليل ممن لم يسمعوا عن CSS، لأننا غالبًا ما نحتاج إلى استخدامه في عملية إنشاء صفحات الويب.

ثانياً: يمكننا تحديد مظهر غني وسهل التعديل للمستند من خلال CSS لتقليل عبء العمل على منتجي صفحات الويب، وبالتالي تقليل تكلفة الإنتاج وما بعد الصيانة.

في الواقع، من غير الضروري التحدث عن ماهية CSS وما هي وظائفها، وأعتقد أن الأصدقاء الذين يشاركون في إنتاج صفحات الويب قد تعرضوا لها بالفعل بشكل أو بآخر.

أقرب إلى المنزل، دعونا ندخل في موضوع اليوم:

1. ما هي أولوية CSS؟

يشير ما يسمى بأولوية CSS إلى الترتيب الذي يتم به تحليل أنماط CSS في المتصفح.

2. قواعد أولوية CSS

وبما أن الأنماط لها الأولوية، فستكون هناك قاعدة للاتفاق على هذه الأولوية، وهذه "القاعدة" هي محور هذه المقالة.

تصف الخصوصية في ورقة الأنماط الوزن النسبي للقواعد المختلفة وقواعدها الأساسية هي:

1. حساب عدد سمات المعرف في المحدد.
2. حساب عدد سمات CLASS في المحدد.
3. حساب عدد أسماء علامات HTML في المحدد.

وأخيرًا، اكتب الأرقام الثلاثة بالترتيب الصحيح دون إضافة مسافات أو فواصل للحصول على رقم مكون من ثلاثة أرقام (يستخدم css2.1 4 أرقام). (لاحظ أنك تحتاج إلى تحويل الرقم إلى رقم أكبر ينتهي بثلاثة أرقام). تسهل القائمة النهائية للأرقام المقابلة للمحدد تحديد ميزات الرقم الأعلى التي تتجاوز ميزات الرقم الأقل.

على سبيل المثال:

1. لكل محدد معرف (#someid)، أضف 0,1,0,0.
2. أضف 0,0,1,0 إلى كل محدد فئة (.someclass)، وكل محدد سمة (نموذج مثل [attr=value]، وما إلى ذلك)، وكل فئة زائفة (نموذج: تحويم، وما إلى ذلك).
3. لكل عنصر أو عنصر زائف (:firstchild)، وما إلى ذلك، أضف 0,0,0,1.
4. تتضمن المحددات الأخرى المحدد العام *، بالإضافة إلى 0,0,0,0. وهو يعادل عدم إضافته، ولكن هذا أيضاً نوع من الخصوصية، سيتم شرحه لاحقاً.

3. قائمة محدد لتصنيف الميزات

فيما يلي قائمة بالمحددات مرتبة حسب السمة:

انطلاقًا من الجدول أعلاه وحده، يبدو من الصعب فهمه، وهنا جدول آخر:

مما سبق، يمكن أن نرى بسهولة أن وزن علامة HTML هو 1، ووزن CLASS هو 10، ووزن المعرف هو 100، والوزن الموروث هو 0 (سيتم مناقشته لاحقًا).

أضف سلاسل الأرقام شيئا فشيئا وفقا لهذه القواعد لتحصل على الوزن النهائي، ثم قارنها شيئا فشيئا من اليسار إلى اليمين عند المقارنة والاختيار.

مشكلة الأولوية هي في الواقع مشكلة حل تعارض. عندما يتم تحديد نفس العنصر (المحتوى) بواسطة محدد CSS، يجب اختيار قواعد CSS مختلفة وفقًا للأولوية. هناك في الواقع العديد من المشكلات المعنية.

بعد قولي هذا، علينا أن نتحدث عن وراثة CSS.