لقد رأيت مؤخرًا مدونة تحتوي على شرح أفضل لأولوية CSS، على الرغم من وجود مقالات ذات صلة على الإنترنت، إلا أنني ما زلت أعيد نشرها لتكون مرجعًا لك.
شرح تفصيلي لنطق أولوية CSS يتضمن أربعة مستويات (محدد النص، محدد المعرف، محدد الفئة، محدد العنصر) وعدد مرات التكرار لكل مستوى. يتم حساب أولوية CSS بناءً على عدد تكرارات هذه المستويات الأربعة.
ما يلي هو اقتباس: [أعيد طبعه من مدونة GOVO]
يجب تقسيم القراءة ذات الأولوية إلى "مجموعات". المجموعات مستقلة عن بعضها البعض ويتم مقارنتها من اليسار إلى اليمين. تظهر في مجموعات، مفصولة بفواصل.
مثال لكود المصدر
[www.downcodes.com] محدد (أ، ب، ج، د)
قارن: ↑ , ↑ , ↑ , ↑
المحدد (a، b، c، d)، كما هو موضح في النص الأصلي في w3c.org، مقسم إلى أربع مجموعات a، b، c، d، كلها أعداد صحيحة موجبة، والقيمة الافتراضية هي 0، المقابلة لمحدد مختلف تشكل الهياكل والتراكيب. عند مقارنة الأولويات بين المحددات، قارن واحدًا بواحد من اليسار إلى اليمين. عندما تكون المقارنة أكبر، يمكن إيقاف المقارنة.
مثال لكود المصدر
[www.downcodes.com] 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 بواسطة اسم العنصر، أي محدد العنصر، وسيتم تجميع مجموعة القيم؛
لاحظ أن هذه المجموعات الأربع من القيم تتوافق مع أنواع مختلفة من المحددات ولا تؤثر على بعضها البعض، ويتم مقارنتها وفقًا لقواعد القراءة.
!مهم، لم تتم مناقشة مبدأ القرب والميراث هنا، ولا يوجد رمز مثال. نرحب بالجميع للحضور إلى W3Cbbs.com للمناقشة!
إليك مثال: مشكلات أولوية CSS
تتضمن أولوية CSS أربعة مستويات (محدد النص، محدد المعرف، محدد الفئة، محدد العنصر) وعدد مرات حدوث كل مستوى. يتم حساب أولوية CSS بناءً على عدد تكرارات هذه المستويات الأربعة.
قواعد الحساب لأولوية CSS هي كما يلي:
مثال لكود المصدر
[www.downcodes.com] * النمط المحدد في الصفحة، أضف 1,0,0,0
* لكل محدد معرف (مثل #id)، أضف 0,1,0,0
* أضف 0,0,1,0 إلى كل محدد فئة (مثل .class)، وكل محدد سمة (مثل [attribute=])، وكل فئة زائفة (مثل :hover)
* لكل محدد عنصر (مثل p) أو محدد عنصر زائف (مثل:firstchild)، وما إلى ذلك، أضف 0,0,0,1
ثم قم بإضافة هذه الأرقام الأربعة بشكل منفصل للحصول على قيمة كل أولوية محددة بواسطة CSS.
ثم قارن الحجم شيئًا فشيئًا من اليسار إلى اليمين، وسيكون لنمط CSS ذو العدد الأكبر أولوية أعلى.
مثال:
ملف css أو <style> محدد كما يلي:
مثال لكود المصدر
[www.downcodes.com] 1. h1 {اللون: أحمر؛}
/* محدد العناصر، والنتيجة هي 0,0,0,1 */
2. الجسم h1 {اللون: أخضر؛}
/* محددان للعناصر، والنتيجة هي 0,0,0,2 */
3. h2.العنب {اللون: أرجواني؛}
/* محدد العناصر ومحدد الفئة، والنتيجة هي 0,0,1,1*/
4. لي#إجابة {اللون: كحلي؛}
/* محدد العناصر، محدد المعرف، النتيجة هي 0,1,0,1 */
يتم تعريف سمة النمط للعنصر على النحو التالي:
مثال لكود المصدر
[www.downcodes.com] h1 {اللون: أزرق؛}
/* محدد في الصفحة، محدد العناصر، والنتيجة هي 1,0,0,1*/
ملحوظة: جميع الأرقام متراكبة هنا، (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1) ,0,0,1)=(1,1,1,6)
ومنذ ذلك الحين أصبح لون العنصر h1 أزرق.
يلاحظ:
1. النمط المعلن بواسطة !important له الأولوية القصوى في حالة وجود تعارض، سيتم حسابه مرة أخرى.
2. إذا كانت الأولويات هي نفسها، فحدد النمط الذي يظهر أخيرًا.
3. النمط الموروث له الأولوية الأدنى.
