يقدم CSS مفاهيم الفئات الزائفة والعناصر الزائفة لتنسيق المعلومات خارج شجرة المستندات. بمعنى آخر، يتم استخدام الفئات الزائفة والعناصر الزائفة لتعديل الأجزاء غير الموجودة في شجرة الوثيقة، مثل الحرف الأول في الجملة، أو العنصر الأول في القائمة، أو عندما يحوم الماوس فوق عنصر معين. النمط الذي سيتم تعيينه عند تشغيل الارتباط التشعبي.
ما هي العناصر الزائفة؟
العناصر الزائفة: تستخدم لإنشاء بعض العناصر غير الموجودة في شجرة الوثيقة وإضافة الأنماط إليها. في الواقع، العناصر الزائفة هي أشياء لا يمكن للمحددات العادية القيام بها قبل أو بعد عناصر معينة. محتوى عنصر التحكم هو نفس العنصر، ولكنه في حد ذاته عبارة عن تجريد قائم على العنصر وغير موجود في بنية المستند. على سبيل المثال، يمكننا استخدام :before لإضافة بعض النص أمام عنصر وإضافة أنماط إلى هذا النص.
خصائص العنصر
1. المزايا:
(1) لا تشغل عقد DOM وقلل عدد عقد DOM.
(2) اسمح لـ CSS بالمساعدة في حل بعض مشكلات JavaScript وتبسيط عملية التطوير.
(3) تجنب إضافة عناصر صفحة لا معنى لها.
2. العيوب:
(1) لا يفضي إلى التصحيح.
(2) لا تنعكس العناصر الزائفة فعليًا في محتوى المستند، بل تنعكس فقط في التأثير المرئي، لذلك لا يمكنك إضافة محتوى عملي إلى العناصر الزائفة، ولن يتم الزحف إلى هذا الجزء من المحتوى بواسطة محركات البحث.
يوفر CSS سلسلة من العناصر الزائفة، كما هو موضح في الجدول التالي:
1.::بعد
يمكن للعنصر الزائف::after إدراج بعض المحتوى بعد العنصر المحدد في ::after، تحتاج إلى استخدام سمة المحتوى لتحديد المحتوى المراد إلحاقه، وفي ::after، يجب عليك تحديد سمة المحتوى حتى تصبح نافذة المفعول. (لا يلزم إدراج أي محتوى) يمكن تعريف قيمة سمة المحتوى على أنها فارغة).
2.::قبل
يمكن للعنصر الزائف::before إدراج بعض المحتوى قبل العنصر المحدد. كما هو الحال مع ::بعد، يجب أيضًا استخدام سمة المحتوى في ::قبل تحديد المحتوى المراد إلحاقه، ويجب تعريف سمة المحتوى في ::قبل أن تصبح سارية المفعول (عندما لا يكون هناك محتوى ليتم إدراجه، يمكن تعريف قيمة سمة المحتوى على أنها فارغة).
3.::الحرف الأول
يتم استخدام العنصر الزائف::الحرف الأول لتعيين نمط الحرف الأول للمحتوى في العنصر المحدد، ويتم استخدامه عادةً مع حجم الخط وسمات التعويم لإنشاء تأثير الأحرف الاستهلالية. تجدر الإشارة إلى أن العنصر الزائف ::الحرف الأول لا يمكن استخدامه إلا لعناصر مستوى الكتلة. إذا أرادت العناصر المضمنة استخدام هذا العنصر الزائف، فيجب تحويلها إلى عناصر مستوى الكتلة أولاً.
4.::السطر الأول
يتم استخدام العنصر الزائف::first-line لتعيين نمط السطر الأول من المحتوى في العنصر المحدد. وعلى غرار ::first-letter، لا يمكن استخدام العنصر الزائف::first-line إلا لعناصر مستوى الكتلة تريد العناصر المضمنة استخدام هذا العنصر الزائف، وتحتاج إلى تحويله إلى عنصر على مستوى الكتلة أولاً.
5.::الاختيار
يتم استخدام العنصر الزائف :: التحديد لتعيين النمط عند تحديد الكائن. تجدر الإشارة إلى أن العنصر الزائف :: التحديد يمكنه فقط تحديد اللون والخلفية والمؤشر والمخطط التفصيلي وظل النص عند تحديد العنصر (IE11). لا يدعمها بعد تحديد هذه السمة) والسمات الأخرى.
6.::عنصر نائب
يتم استخدام العنصر الزائف::placeholder لتعيين نص العنصر النائب (النص الذي تم تعيينه من خلال سمة العنصر النائب لـ HTML) لعناصر النموذج (عناصر <input> و<textarea>).