الدليل النهائي لفئات CSS الزائفة
سواء كنت مبتدئًا أو مطور CSS ذي خبرة ، فمن المحتمل أنك سمعت عنه الزائفة الطبقات. من المحتمل أن تكون الطبقة الزائفة الأكثر شهرة :يحوم, والتي تمكننا من تصميم عنصر عندما يكون في حالة التحويم, أي عندما يتم توجيه جهاز المؤشر ، مثل الماوس ، إلى ذلك.
باتباع مفهوم منشوراتنا السابقة على الهامش: Auto و CSS Floats ، نلقي نظرة أعمق على الفصول الزائفة في هذا المنشور. سوف نرى ما هي الطبقات الزائفة حقا, كيف تعمل ، وكيف يمكننا تصنيفها ، و كيف تختلف عن العناصر الزائفة.
ما هي الطبقات الزائفة?
الفئة الزائفة هي كلمة رئيسية يمكننا إضافتها إلى محددات CSS من أجل تحديد حالة خاصة عنصر HTML الانتماء. يمكننا إضافة فئة زائفة إلى محدد CSS باستخدام بناء جملة القولون : مثله: a: hover …
فئة CSS هي سمة يمكننا إضافتها إلى عناصر HTML التي نريد تطبيقها على نفس قواعد النمط ، مثل عناصر القائمة العليا أو عناوين عناصر واجهة الشريط الجانبي. بمعنى آخر ، يمكننا استخدام فئات CSS ل مجموعة أو تصنيف عناصر HTML التي تتشابه بطريقة أو بأخرى.
الطبقات الزائفة تشبهها بمعنى أنها كذلك تستخدم لإضافة قواعد النمط إلى العناصر التي تشترك في نفس الخاصية.
ولكن في حين أن الطبقات الحقيقية هي تعريف المستخدم و يمكن رصدها في شفرة المصدر, على سبيل المثال ال وظيفة من الطبقات CSS العادية هو ل تصنيف أو مجموعة العناصر. يعرف المطورون كيف يتم تجميع عناصرهم: يمكنهم تكوين فئات مثل "عناصر القائمة" ، "الأزرار" ، "الصور المصغرة" ، إلخ. تستند هذه التصنيفات إلى خصائص العناصر التي قدمها المطورين أنفسهم. على سبيل المثال ، إذا قرر المطور استخدام عناصر HTML ولكن لديها الخصائص المشتركة الخاصة بهم بناءً على حالته وموقعه وطبيعته وتفاعله مع الصفحة والمستخدم. هذه هي الخصائص التي هي ليس يتم وضع علامة عادة في كود HTML, ولكننا نستطيع استهدافهم مع الطبقات الزائفة في CSS ، على سبيل المثال: هذه هي نوع من الخصائص التي تستهدفها بشكل عام الطبقات الزائفة. لفهم الفرق بين الفصول والفصول الزائفة بشكل أفضل ، دعنا نفترض أننا نستخدم الفصل يمكننا تصميم هذه العناصر الفرعية الأخيرة باستخدام CSS التالي: ولكن ماذا يحدث عندما يتغير العنصر الأخير؟ حسنا ، سوف يتعين علينا تحريك هذه المتاعب من يمكن ترك فئات التحديث إلى وكيل المستخدم, على الأقل لتلك الخصائص الشائعة بين العناصر (وكون العنصر الأخير شائعًا قدر الإمكان). وجود محددة مسبقا هناك العديد من أنواع الطبقات الزائفة ، وكلها توفر لنا طرقًا لاستهداف العناصر بناءً على ميزاتها التي يتعذر الوصول إليها أو صعوبة الوصول إليها. فيما يلي قائمة بالفصول الزائفة القياسية في MDN. يتم إضافة الطبقات الزائفة الديناميكية وإزالتها من عناصر HTML حيوي, بناء على الحالة التي ينتقلون إليها استجابة لتفاعلات المستخدم. بعض الأمثلة من الطبقات الزائفة الديناميكية هي تضاف الطبقات الزائفة المستندة إلى الدولة إلى العناصر عندما تكون في حالة ساكنة معينة. بعض الأمثلة الأكثر شهرة هي: يجب أن تكون الطبقة الزائفة الأكثر شعبية على أساس الدولة تصنف الطبقات الزائفة الهيكلية العناصر القائمة على موقفهم في هيكل الوثيقة. الأمثلة الأكثر شيوعا هي هناك أيضًا فئات زائفة متنوعة يصعب تصنيفها ، مثل: واحدة من أصعب الأشياء حول الطبقات الزائفة هي على الأرجح فهم الفرق بين كلاهما الطبقات الزائفة الهيكلية ، والعلامة عنصر محدد داخل عنصر الأصل (الحاوية) ، ولكن بطريقة مختلفة. افترض ن هو 2 ، ثم دعونا نلقي نظرة على مثال. لنرى كيف يقوم نمط CSS القصير هذا بتطوير HTML في حالتين مختلفتين. في الحالة 1 ، العنصر الثاني داخل ولكن إذا كان العنصر الأصل هل لدينا فقرة ثانية ، و في مثالنا ، و الفقرة 1 ، الطفل 1 الفقرة 2 ، الطفل 3 في الحالة الثانية ، ننقل القائمة غير مرتبة إلى المركز الثالث ، وستظهر الفقرة الثانية. وهذا يعني أن كلا من الفقرة 1 ، الطفل 1 الفقرة 2 ، الطفل 2 إذا كنت ترغب في قراءة المزيد عن الاختلافات بين عندما نتحدث عن الطبقات الزائفة ، من المهم أيضًا أن نفهمها كيف تختلف عن العناصر الزائفة, من أجل عدم مزجها. ولكن بينما نستخدم فئات زائفة لتحديد عناصر HTML التي موجودة في شجرة الوثيقة فقط لم يتم تحديدها بشكل منفصل ، تسمح لنا العناصر الزائفة باستهداف العناصر التي لا توجد عادة في DOM ، إما على الإطلاق (على سبيل المثال هناك أيضا الفرق في بناء الجملة. يتم تعريف العناصر الزائفة بشكل عام مع كولون مزدوج هذا يمكن أن يؤدي إلى حالة من الالتباس كما في CSS2 ، تم تمييز العناصر الزائفة بنقطتين مفردة أيضًا - لا تزال المتصفحات تقبل بناء الجملة النقطية للعناصر الزائفة. هناك أيضا اختلافات بين الطبقات الزائفة والعناصر الزائفة في الطريقة التي يمكننا بها استهدافهم باستخدام CSS. يمكن أن تظهر العناصر الزائفة فقط بعد تسلسل المحددات ، في حين يمكن وضع الطبقات الزائفة في أي مكان في تسلسل محدد CSS. على سبيل المثال ، يمكنك استهداف عنصر القائمة الأخير لعنصر قائمة مثل أو يحدد التسلسل الأول من المحدد آخر طفل داخل دعونا نحاول القيام بشيء مماثل مع العناصر الزائفة. رمز CSS أعلاه صالح ، وسيظهر النص "الأحمر" بعد ال هذا الكود من ناحية أخرى ، لن يعمل ، كما نحن لا يمكن تغيير موضع العنصر الزائف داخل تسلسل محدد. أيضا ، يمكن أن يظهر عنصر زائف واحد فقط بجانب محدد ، في حين أن الطبقات الزائفة يمكن دمجها مع بعضها البعض إذا كان الجمع المنطقي. على سبيل المثال ، لاستهداف العناصر الفرعية الأولى للقراءة فقط ، يمكننا إنشاء مجموعة من الطبقات الزائفة رمز محدد مع من المهم أن تعرف ذلك هؤلاء هم ليس فصول CSS الزائفة التي يتم استهدافها من قبل مسج. يطلق عليهم ملحقات محدد مسج. تتيح لك ملحقات محدد jQuery استهداف عناصر HTML بكلمات أبسط. معظمهم عبارة عن مجموعات من محددات 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؛
الأنواع الرئيسية للفئات الزائفة
1. فصول الزائفة الديناميكية
:يحوم, :التركيز, :حلقة الوصل, و : زار, وكلها يمكن أن تضاف إلى مرساة العلامة. a: زيارة color: # 8D20AE؛ .button: hover، .button: focus font-weight: bold؛
2. فصول الزائفة القائمة على الدولة
:التحقق التي يمكن تطبيقها على خانات الاختيار ():شاشة كاملة لاستهداف أي عنصر يتم عرضه حاليًا في وضع ملء الشاشة:معاق لعناصر HTML التي يمكن أن تكون في وضع تعطيل ، مثل , , و . :التحقق, أي الأعلام سواء تم تحديد خانة اختيار أم لا. .checkbox: check + label font-style: italic؛ الإدخال: معطل background-color: #EEEEEE؛
3. الطبقات الزائفة الهيكلية
: أول طفل, :الطفل الأخير, و : نطة الطفل (ن) - جميع يمكن استخدامها لاستهداف عنصر تابع معين داخل حاوية على أساس موقفها - و :جذر الذي يستهدف العنصر الأصل الأعلى مستوى في DOM. 4. فصول زائفة متنوعة
: لا (خ) الذي يحدد العناصر التي لا تتطابق مع المحدد س: لانج (اللغة رمز) الذي يحدد عناصر المحتوى في لغة معينة: دير (الاتجاهية) يختار العناصر ذات المحتوى من اتجاهية معينة (من اليسار إلى اليمين أو من اليمين إلى اليسار). p: lang (ko) background-colour: # FFFF00؛ : root background-color: # FAEBD7؛
الألف الطفل ضد ن نوع من شبه فئات
: نطة الطفل و : نطة من نوع الزائفة الطبقات.: نطة من الطفل (ن) يستهدف العنصر الذي هو الطفل الثاني من عنصر الأصل, و : نطة من نوع (ن) أهداف الثاني بين نفس النوعيه من العنصر (مثل الفقرات) داخل عنصر الأصل. / * فقرة تمثل أيضًا الطفل الثاني داخل العنصر الأصلي * / p: nth-child (2) color: # 1E90FF؛ // lightblue / * الفقرة الثانية داخل العنصر الأصل * / p: nth-of-type (2) font-weight: bold؛
حالة 1
نطة الطفل (2) القاعدة لن تنطبق عليه. رغم أنه طفل ثانٍ ، إلا أنه كذلك ليس فقرة. نطة من نوع (2) سيتم تطبيق القاعدة ، لأن هذه القاعدة تبحث فقط عن العناصر ، ولا يهتم الآخر أنواع من العناصر (مثل القوائم غير مرتبة) داخل العنصر الأصل.نطة من نوع (2) حكم سوف نمط الفقرة الثانية وهو الطفل 3.
قائمة غير مرتبة 1 ، الطفل 2
القضية 2
: نطة الطفل (2) و ال : نطة من نوع (2) سيتم تطبيق القواعد ، لأن الفقرة الثانية هي أيضًا الطفل الثاني لوالدها
قائمة غير مرتبة 1 ، الطفل 3
: نطة من الطفل و : نطة من نوع الطبقات الزائفة ، CSS الخدع لديه وظيفة كبيرة على ذلك. إذا كنت تستخدم SASS ، فيمكن أن يساعدك Family.scss على إنشاء معقد الألف الطفلعناصر ified.الطبقات الزائفة مقابل العناصر الزائفة
عناصر-الزائفة, مثل ::قبل و ::بعد (انظر هذا البرنامج التعليمي حول كيفية استخدامها) هي أيضا أضيفت من قبل وكلاء المستخدم, و يمكن استهدافها وتصميمها باستخدام CSS كذلك ، تماما مثل الطبقات الزائفة. ::قبل و ::بعد) أو فقط كأجزاء معينة من العناصر الموجودة (على سبيل المثال ::الرسالة الأولى أو :: نائب). ::, في حين يتم تحديد الطبقات الزائفة مع القولون واحد :.1. مكانهم في تسلسل محدد CSS
ul>: last-child.red color: # B0171F؛
ul> .red: last-child color: # B0171F؛
.أحمر) والثاني يختار الطفل الأخير من بين العناصر التي تمتلك .أحمر الطبقة في الداخل ul> .red :: after display: block؛ المحتوى: "أحمر" ؛ اللون: # B0171F ؛
العناصر مع الفصل .أحمر. ul> :: after.red display: block؛ المحتوى: "أحمر" ؛ اللون: # B0171F ؛
2. عدد مرات في تسلسل محدد
: أول طفل و :يقرأ فقط بالطريقة الآتية: : first-child: للقراءة فقط color: #EEEEEE؛
ملحقات مسج محدد
: بناء الجملة لا يشكل دائمًا فئة CSS زائفة مناسبة. إذا كنت قد استخدمت jQuery على الإطلاق ، فربما تكون قد استخدمت العديد من محدداتها مع : بناء الجملة ، على سبيل المثال $ ( ': مربع'), $ ( ': الإدخال') و $ ( ': اختيار'). / * تغيير خط جميع عناصر HTML المرتبطة بالإدخال ، مثل الزر ، وحدد ، وإدخال * / $ (": input") .css ("عائلة الخط" ، "courier new")
