وفقًا لفهمنا لأسبقية CSS، فإن آخر نمط CSS محدد سيتجاوز جميع الأنماط الموجودة أو المتعارضة المحددة قبله، مثل المثال التالي:
| وفيما يلي المحتوى المقتبس: مثال على كود المصدر: ع { اللون: أحمر الخلفية: أصفر } |
ستظهر الفقرة أعلاه في النهاية بخط أخضر مع خلفية صفراء، وذلك لأن اللون الأخضر المحدد الأخير يحل محل اللون الأحمر المحدد مسبقًا، أما سبب عدم اختفاء الخلفية الصفراء فهو عدم وجودها تعريف متعارض في التعريف، لذلك لا يزال صالحا.
دعونا نرى تأثير التشغيل:
| وفيما يلي المحتوى المقتبس: كود المصدر للتشغيل: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { اللون: أحمر الخلفية: أصفر }p { اللون: أخضر </style></head><body><p>admin5</p></body></ أتش تي أم أل> <p class="red green blue">www.admin5.com</p> <p class="green blue red">admin5</p> <p class="blue red green">www.admin5.com</p> |
ربما تعتقد أنك تفهم بالفعل. هل تفهم حقا؟ حسنًا، فلنجري اختبارًا صغيرًا.
| وفيما يلي المحتوى المقتبس: مثال على كود المصدر: .أحمر {اللون: أحمر} .أخضر {اللون: أخضر} .أزرق {اللون: أزرق} ... <p class="red green blue">admin5</p> <p class="green blue red">جنة التعلم لمشرفي المواقع</p> <p class="blue red green">www.admin5.com</p> |
من فضلك قل لي، ما هو اللون الذي سيظهر فيه النص الموجود في الفقرات الثلاث أعلاه عندما يتم عرضه أخيرًا؟
من فضلك لا تتعجل في تشغيل الكود التالي، فكر في الأمر، ما هو لونه؟
حسنًا، لقد فكرت في الأمر بالفعل، فلنرى تأثير العملية:
| وفيما يلي المحتوى المقتبس: كود المصدر للتشغيل: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { اللون: أحمر }.green { اللون: أخضر }.blue { اللون: أزرق </style></head><body><p class=" أحمر أخضر أزرق">admin5</p><p class="green blue red">جنة التعلم لمشرفي المواقع</p><p class="blue red green">www.admin5.com</p></body > </html> |
الجواب هو أنه يتم عرضها جميعًا باللون الأزرق، أي باللون الأزرق، على الرغم من أن كل فقرة تحتوي على ثلاثة أنماط فقرات مطبقة بترتيب مختلف، إلا أنه يبدو أنه يجب تحديد اللون وفقًا للترتيب الذي يتم تطبيق الأنماط به على سبيل المثال ، يتم عرض الأول باللون الأزرق، ويتم عرض الأول باللون الأزرق، ويتم عرض الثالث باللون الأخضر، وهذا في الواقع ليس له علاقة بالترتيب حيث يتم تطبيق الأنماط كلها في النهاية على النمط المحدد الأخير، واللون أزرق! من فضلك لا تقلق إذا واجهت مشاكل مماثلة في المستقبل، لأن التجربة المذكورة أعلاه قد أعطتك الإجابة بالفعل.