شرح تفصيلي لنطق أولوية CSS يتضمن أربعة مستويات (محدد النص، محدد المعرف، محدد الفئة، محدد العنصر) وعدد مرات التكرار لكل مستوى. يتم حساب أولوية CSS بناءً على عدد تكرارات هذه المستويات الأربعة.
يجب تقسيم القراءة ذات الأولوية إلى "مجموعات". المجموعات مستقلة عن بعضها البعض ويتم مقارنتها من اليسار إلى اليمين. تظهر في مجموعات، مفصولة بفواصل.
محدد (أ، ب، ج، د)
قارن: ↑ , ↑ , ↑ , ↑
محدد (أ، ب، ج، د)
كما هو موضح في النص الأصلي في w3c.org، فهو مقسم إلى أربع مجموعات a وb وc وd، وكلها أعداد صحيحة موجبة. القيمة الافتراضية هي 0، وهو ما يتوافق مع هياكل التحديد وأشكال التركيب المختلفة. عند مقارنة الأولويات بين المحددات، قارن واحدًا بواحد من اليسار إلى اليمين. عندما تكون المقارنة أكبر، يمكن إيقاف المقارنة.
li.red.level {} /* أ=0 ب=0 ج=2 د=1 -> الخصوصية = 0 , 0 , 2 , 1 */
/*قارن ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> الخصوصية = 0 , 0 , 1 , 1 */
/*قارن ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* أ=0 ب=0 ج=1 د=3 -> الخصوصية = 0 , 0 , 1 , 3 */
/*قارن ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> الخصوصية = 0 , 1 , 0 , 0 */
/*قارن ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> خصوصية = 1 , 0 , 0 , 0 */
(في الجدول أعلاه، ↑ يعني أن المقارنة لا تزال مطلوبة، و√ تعني أن تم الحصول على النتائج من هنا النتيجة)
علاوة على ذلك، طالما أنه مكتوب بشكل صحيح، يمكن معرفة بنية المحدد بشكل تقريبي فقط من الأولوية، مثل:
1,0,0,0 يشير إلى النمط الموجود داخل العنصر؛
يمثل 0،2،1،1 محددًا يتكون من محددي معرف، وفئة أو فئة زائفة أو محدد سمة، ومحدد عنصر.
تفاصيل قواعد أسبقية CSS:
وبعد تصحيح النطق يمكننا البدء بالحديث عن القواعد التفصيلية:
ستكون قيمة المجموعة أ 1 فقط عند كتابة CSS في سمة النمط، وإلا ستكون 0. بيان النمط المكتوب في النمط ليس في الواقع محددًا، لذا فإن قيم المجموعة ب، ج، د هنا كلها 0، والقيمة الفعلية فقط هي أن المحدد فقط هو الذي سيحتوي على قيم المجموعة b وc وd.
يتم تحديد قيمة المجموعة b بواسطة محدد المعرف #ID، وعدد محددات المعرف الموجودة، وسيتم تجميع قيمة المجموعة؛
يتم تحديد مجموعة القيم c بواسطة الفئة والفئة الزائفة ومحدد السمات، وسيتم تجميع مجموعة القيم؛
يتم تحديد مجموعة القيم d بواسطة اسم العنصر، أي محدد العنصر، وسيتم تجميع مجموعة القيم؛
لاحظ أن هذه المجموعات الأربع من القيم تتوافق مع أنواع مختلفة من المحددات ولا تؤثر على بعضها البعض، ويتم مقارنتها وفقًا لقواعد القراءة.
!مهم، لم تتم مناقشة مبدأ القرب والوراثة هنا، ولا يوجد رمز مثال. نرحب بالجميع لزيارة webjx.com للمناقشة!
فيما يلي بعض الأمثلة: مشكلات أولوية CSS تتضمن أولوية CSS أربعة مستويات (محدد النص، ومحدد المعرف، ومحدد الفئة، ومحدد العنصر) وعدد مرات التكرار لكل مستوى. يتم حساب أولوية CSS بناءً على عدد تكرارات هذه المستويات الأربعة.
قواعد الحساب لأولوية CSS هي كما يلي:
* النمط المحدد في الصفحة، أضف 1,0,0,0
* لكل محدد معرف (مثل #id)، أضف 0,1,0,0
* أضف 0,0,1,0 إلى كل محدد فئة (مثل .class)، وكل محدد سمة (مثل [attribute=])، وكل فئة زائفة (مثل: hover)
* لكل محدد عنصر (مثل p) أو محدد عنصر زائف (مثل: الطفل الأول)، أضف 0,0,0,1
ثم قم بإضافة هذه الأرقام الأربعة بشكل منفصل للحصول على قيمة كل أولوية محددة بواسطة CSS.
ثم قارن الحجم شيئًا فشيئًا من اليسار إلى اليمين، وسيكون لنمط CSS ذو العدد الأكبر أولوية أعلى.