تحديد الأولوية في CSS

تحميل الإختبار....

قائمة الأجوبة

تحديد الأولوية في CSS — ورقة الأجوبة الخاصة بالإختبار.

1. ما هو تحديد الأولوية (specificity) في CSS؟

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

الشرح : تحديد الأولوية في CSS هو مجموعة من القواعد التي تحدد أي قاعدة سيتم تطبيقها على العنصر عند تطابق قواعد متعددة. يتم حسابها بناءً على أنواع المحددات مثل معرفات العناصر (ID) والفئات (class) والمحددات العنصرية (element selectors).

2. ما معنى النتيجة 0-1-0 في تحديد الأولوية؟

الجواب: محدد فئة واحد

الشرح : يتم حساب النتيجة على هذا الشكل (المعرف، الفئة/المحدد الزائف/السمات، العنصر/العناصر الزائفة). النتيجة 0-1-0 تعني وجود محدد فئة واحد فقط.

3. أي مما يلي له أعلى تحديد أولوية؟

الجواب: .box.box

الشرح : تكرار نفس الفئة يزيد من تحديد الأولوية للمحدد.

4. ما تحديد الأولوية لـ :not(.foo#bar)؟

الجواب: 1-1-0

الشرح : يتم احتساب فقط ما بداخل :not().

5. أي من التالي له تحديد أولوية أكبر من 0؟

الجواب: :is(.cls)

الشرح : المحدد الشامل `*` و `:where()` لهم تحديد أولوية 0 دائمًا.

6. هل (0,5,1) له أولوية أعلى من (1,0,0)؟

الجواب: false

الشرح : محددات المعرف (ID) تتفوق على أي عدد من الفئات أو العناصر.

7. هل تحديد الأولوية لـ #myId هو نفسه [id="myId"]؟

الجواب: false

الشرح : تحديد الأولوية لـ #myId هو 1-0-0 بينما [id="myId"] هو 0-1-0.

8. ما تحديد الأولوية لـ :is(div, .cls, #id)؟

الجواب: 1-0-0

الشرح : :is() تأخذ تحديد الأولوية لأعلى محدد داخلي، وهو #id في هذه الحالة.

9. ما تحديد الأولوية لـ div.box:hover::before؟

الجواب: 0-2-2

الشرح : .box و :hover يُحسبان كفئتين، و div و ::before يُحسبان كعنصرين.

10. هل الأنماط المضمّنة لها تحديد أولوية أعلى من المحددات التي تحتوي على معرف؟

الجواب: true

الشرح : الأنماط المضمّنة (style="...") لا تدخل ضمن حساب تحديد الأولوية، لكنها تُقيّم أولًا في سلسلة الأولويات وتتفوق على أي أنماط أخرى ما لم يتم استخدام !important.

11. ما تحديد الأولوية لـ :where(div#id.cls)؟

الجواب: 0-0-0

الشرح : :where() دائمًا تُحسب بتحديد أولوية صفر بغض النظر عما بداخلها.

12. من يفوز عند وجود تضارب؟

الجواب: p.btn { color: blue !important; }

الشرح : !important تتفوق على تحديد الأولوية إلا إذا كانت موجودة في كلا القاعدتين، عندها يتم الاحتكام للأولوية.

13. تكرار نفس الفئة أو معرف يزيد من تحديد الأولوية.

الجواب: true

الشرح : .btn => 0-1-0، .btn.btn => 0-2-0. كل فئة تضاف إلى العد، وكذلك المعرفات.

14. إذا كان لديك `@layer base, theme, components;` ويوجد تضارب في القواعد بين هذه الطبقات، أي طبقة تفوز؟

الجواب: components (المُعلنة أخيرًا)

الشرح : في @layer، الطبقات التي تُعلن لاحقًا لها أولوية أعلى بغض النظر عن تحديد الأولوية. الترتيب هو: base < theme < components.

15. مع `@layer utilities { .text-red { color: red !important; } }` و `.text-red { color: blue !important; }` خارج الطبقات، من يفوز؟

الجواب: الأحمر (من الطبقة)

الشرح : عند استخدام !important في كلا الحالتين، فإن القواعد داخل الطبقات تفوز إذا تم الإعلان عنها قبل القواعد غير الطبقية.

إقرأ تاليا