الصفحة الرئيسية » الترميز » الدليل النهائي لفئات CSS الزائفة

    الدليل النهائي لفئات CSS الزائفة

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

    باتباع مفهوم منشوراتنا السابقة على الهامش: Auto و CSS Floats ، نلقي نظرة أعمق على الفصول الزائفة في هذا المنشور. سوف نرى ما هي الطبقات الزائفة حقا, كيف تعمل ، وكيف يمكننا تصنيفها ، و كيف تختلف عن العناصر الزائفة.

    ما هي الطبقات الزائفة?

    الفئة الزائفة هي كلمة رئيسية يمكننا إضافتها إلى محددات CSS من أجل تحديد حالة خاصة عنصر HTML الانتماء. يمكننا إضافة فئة زائفة إلى محدد CSS باستخدام بناء جملة القولون : مثله: a: hover …

    فئة CSS هي سمة يمكننا إضافتها إلى عناصر HTML التي نريد تطبيقها على نفس قواعد النمط ، مثل عناصر القائمة العليا أو عناوين عناصر واجهة الشريط الجانبي. بمعنى آخر ، يمكننا استخدام فئات CSS ل مجموعة أو تصنيف عناصر HTML التي تتشابه بطريقة أو بأخرى.

    الطبقات الزائفة تشبهها بمعنى أنها كذلك تستخدم لإضافة قواعد النمط إلى العناصر التي تشترك في نفس الخاصية.

    ولكن في حين أن الطبقات الحقيقية هي تعريف المستخدم و يمكن رصدها في شفرة المصدر, على سبيل المثال

    , الطبقات الزائفة هي تمت إضافته بواسطة UA (وكلاء المستخدم) ، مثل متصفحات الويب, بناء على الوضع الحالي لعنصر HTML الانتماء.

    الغرض من الفصول الزائفة

    ال وظيفة من الطبقات CSS العادية هو ل تصنيف أو مجموعة العناصر. يعرف المطورون كيف يتم تجميع عناصرهم: يمكنهم تكوين فئات مثل "عناصر القائمة" ، "الأزرار" ، "الصور المصغرة" ، إلخ. تستند هذه التصنيفات إلى خصائص العناصر التي قدمها المطورين أنفسهم.

    على سبيل المثال ، إذا قرر المطور استخدام

    ككائن مصغّر هي أو هو يمكن أن يصنف ذلك
    مع فئة "الصورة المصغرة".

     
    [...]

    عناصر HTML ولكن لديها الخصائص المشتركة الخاصة بهم بناءً على حالته وموقعه وطبيعته وتفاعله مع الصفحة والمستخدم. هذه هي الخصائص التي هي ليس يتم وضع علامة عادة في كود HTML, ولكننا نستطيع استهدافهم مع الطبقات الزائفة في CSS ، على سبيل المثال:

    • العنصر الذي هو الاخير الطفل داخل عنصر الأصل
    • وصلة وهذا هو زار
    • عنصر قد ذهب شاشة كاملة.

    هذه هي نوع من الخصائص التي تستهدفها بشكل عام الطبقات الزائفة. لفهم الفرق بين الفصول والفصول الزائفة بشكل أفضل ، دعنا نفترض أننا نستخدم الفصل .الاخير لتحديد العناصر الأخيرة في حاويات الأصل المختلفة.

     
    • البند 1
    • البند 2
    • البند 3
    • البند 4

    يمكننا تصميم هذه العناصر الفرعية الأخيرة باستخدام CSS التالي:

     li.last text-convert: uppercase؛  option.last font-style: italic؛  

    ولكن ماذا يحدث عندما يتغير العنصر الأخير؟ حسنا ، سوف يتعين علينا تحريك .الاخير فئة من العنصر الأخير السابق إلى العنصر الحالي.

    هذه المتاعب من يمكن ترك فئات التحديث إلى وكيل المستخدم, على الأقل لتلك الخصائص الشائعة بين العناصر (وكون العنصر الأخير شائعًا قدر الإمكان). وجود محددة مسبقا :الطفل الأخير الفئة المزيفة هو مفيد جدا حقا. بهذه الطريقة ، نحن لا يجب أن تشير إلى العنصر الأخير في HTML-code ، لكن لا يزال بإمكاننا تصميمها باستخدام CSS التالي:

     li: last-child text-convert: uppercase؛  الخيار: last-child font-style: italic؛ 

    الأنواع الرئيسية للفئات الزائفة

    هناك العديد من أنواع الطبقات الزائفة ، وكلها توفر لنا طرقًا لاستهداف العناصر بناءً على ميزاتها التي يتعذر الوصول إليها أو صعوبة الوصول إليها. فيما يلي قائمة بالفصول الزائفة القياسية في MDN.

    1. فصول الزائفة الديناميكية

    يتم إضافة الطبقات الزائفة الديناميكية وإزالتها من عناصر HTML حيوي, بناء على الحالة التي ينتقلون إليها استجابة لتفاعلات المستخدم. بعض الأمثلة من الطبقات الزائفة الديناميكية هي :يحوم, :التركيز, :حلقة الوصل, و : زار, وكلها يمكن أن تضاف إلى مرساة العلامة.

     a: زيارة color: # 8D20AE؛  .button: hover، .button: focus font-weight: bold؛  

    2. فصول الزائفة القائمة على الدولة

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

    • :التحقق التي يمكن تطبيقها على خانات الاختيار ()
    • :شاشة كاملة لاستهداف أي عنصر يتم عرضه حاليًا في وضع ملء الشاشة
    • :معاق لعناصر HTML التي يمكن أن تكون في وضع تعطيل ، مثل ,