تصميم عناصر القائمة الزوجية والفردية: الفئات الزائفة مقابل nth-child

عند محاولة تحقيق ألوان بديلة لعناصر القائمة باستخدام فئات CSS الزائفة، يجوز لك مواجهة القضايا. في حين أنه قد يبدو من المنطقي استخدام li:odd وli:even لهذا الغرض، إلا أن السلوك يمكن أن يكون غير متوقع.

لتصميم المثيلات الفردية والفردية لعناصر القائمة بشكل فعال، فكر في استخدام النهج التالي:

بدلاً من:

li { color: blue }
li:odd { color:green }
li:even { color:red }

الاستخدام:

لي { اللون: أسود؛ } لى: nth-طفل (غريب) { اللون: #777؛ } لى: nth-الطفل (حتى) { اللون: أزرق؛

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

من خلال استبدال :odd و :even بـ :nth-child(odd) و :nth-child(even)، يتم تحقيق تأثير التلوين البديل المطلوب. وذلك لأن :nth-child يسمح لك بتحديد العناصر بناءً على موضعها داخل القائمة، مما يضمن تطبيق التصميم الصحيح على كل عنصر.