المحدد العالمي والعناصر الزائفة

المحدد العالمي (*) يستهدف جميع العناصر في المستند. ومع ذلك، فهي لا تؤثر على العناصر الزائفة مثل:before و:after مباشرةً.

العناصر الزائفة هي تجريدات لـ DOM تمثل العقد الافتراضية. إنها ليست عناصر فعلية وبالتالي لا يمكن استهدافها بواسطة محددات بسيطة مثل *.

لتطبيق الأنماط على العناصر الزائفة، تحتاج إلى تضمينها بشكل صريح في المحدد، على سبيل المثال، ، : before, *:after.

هذا يعني أن الإعلان * { box-sizing: border-box; } لا يؤثر تلقائيًا على العناصر الزائفة مثل :before و :after.

بدلاً من ذلك، تحتاج إلى إعلان :before, :after { box-sizing: border-box; } لتطبيق خاصية تغيير حجم الصندوق على تلك العناصر الزائفة.

قد يستخدم بعض المطورين فقط * { box-sizing: border-box; } ولا تواجه أية مشكلات أبدًا لأن العناصر الزائفة يتم عرضها عادةً في السطر. لا يؤثر تغيير حجم الصندوق على العناصر المضمّنة، لذا فإن استخدام المحدد العام وحده لن يؤثر بشكل ملحوظ على العناصر الزائفة.

من المهم ملاحظة أنه بينما :before، :after يؤثر على العناصر الزائفة من بين جميع العناصر، بما في ذلك html والرأس والنص، لن يتم إنشاء هذه العناصر الزائفة حتى تقوم بتطبيق خاصية المحتوى. لا توجد أية مخاوف تتعلق بالأداء مرتبطة بهذا السلوك.