كيفية استهداف فئة CSS داخل فئة CSS أخرى

'. ثم قم بتخصيص سمة فئة لمزيد من الاستخدام.

الخطوة 2: اصنع حاويات 'div' المتداخلة

بعد ذلك ، قم بإنشاء حاويات div متداخلة باتباع نفس الإجراء في الخطوة 1:

< شعبة فصل = 'المحتوى الرئيسي' >

< شعبة فصل = 'طاولة' >

< شعبة فصل = 'صف' >

< شعبة فصل = 'شق' > تزوج < / شعبة >

< شعبة فصل = 'c-right' > جاك < / شعبة >

< شعبة فصل = 'شق' > توم < / شعبة >

< شعبة فصل = 'c-right' > يوليو < / شعبة >

< / شعبة >

< / شعبة >

< / شعبة >

انتاج |

---

---

الخطوة 3: تطبيق التصميم على حاوية 'div' الرئيسية

الوصول إلى ' شعبة 'حاوية بمساعدة اسم الفئة كـ' .المحتوى الرئيسي ':

.المحتوى الرئيسي {

عرض : 40٪ ؛

هامِش : 0 آلي ؛

لون : أزرق ؛

حدود : 2 بكسل منقط أزرق ؛

محاذاة النص : مركز ؛

}

هنا:

• ' عرض 'حجم عرض العنصر.
• ' هامِش يخصص مساحة حول العنصر خارج الحدود المحددة.
• ' لون 'لون النص المضاف في العنصر.
• ' حدود 'مخططًا أو حدودًا حول العنصر في HTML.
• ' محاذاة النص 'يحدد محاذاة نص العنصر.

الخطوة 4: صمم فئة أخرى

قم بالوصول إلى فئة CSS الرئيسية والفئات المتداخلة الأخرى باستخدام أسمائها. بعد ذلك ، اضبط عرض الحاوية عن طريق تحديد القيمة وفقًا لاختيارك:

.المحتوى الرئيسي .طاولة {

عرض : 80٪ ؛

}

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

.المحتوى الرئيسي .c-right {

عرض : مضمنة كتلة ؛

حجم الخط : 20 بكسل ؛

}

وفقًا لمقتطف الشفرة أعلاه:

• ' عرض 'لضبط عرض عنصر.
• ' حجم الخط 'حجم النص المضاف في الحاوية.

الآن ، يمكنك الوصول إلى الفئات الأخرى باستخدام نفس الطريقة وتطبيق خصائص CSS التالية كما هو مذكور أدناه:

.المحتوى الرئيسي .شق {

عرض : 140 بكسل ؛

الهامش الأيمن : 6 بكسل ؛

حجم الخط : 16 بكسل ؛

}

للقيام بذلك ، سوف نطبق ' عرض '،' الهامش الأيمن ' و ' حجم الخط 'لأغراض التصميم.

علاوة على ذلك ، قم بالوصول إلى ' شعبة 'بمحاذاة حاوية div المتداخلة الأخرى من خلال استخدام اسم الفئة الخاصة بهم وتطبيق خصائص CSS التالية

.رئيسي .c-right {

عرض : آلي ؛

حجم الخط : 15 بكسل ؛

لون : #fff ؛

الهامش الأيمن : 20 بكسل ؛

وزن الخط : طبيعي ؛

}

انتاج |

هذا كل ما يتعلق باستهداف فئة CSS داخل فئة CSS أخرى.

خاتمة

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