ฉันจะทำให้เด็กจำนวนเฉพาะใช้ CSS ได้อย่างไร

ฉันมีสิ่งtableที่tdถูกสร้างขึ้นแบบไดนามิก ฉันรู้วิธีรับลูกคนแรกและลูกคนสุดท้าย แต่คำถามของฉันคือ:

มีวิธีรับลูกที่สองหรือสามโดยใช้ CSS หรือไม่?

สำหรับเบราว์เซอร์ที่ทันสมัยให้ใช้td:nth-child(2)สำหรับที่สองtdและtd:nth-child(3)ที่สาม โปรดจำไว้ว่าสิ่งเหล่านี้เรียกที่สองและสามสำหรับทุกแถวtd

หากคุณต้องการความเข้ากันได้กับ IE ที่เก่ากว่ารุ่น 9 ให้ใช้ sibling combinators หรือ JavaScript ตามที่ Timแนะนำ ดูคำตอบของฉันสำหรับคำถามที่เกี่ยวข้องสำหรับคำอธิบายและภาพประกอบของวิธีการของเขา

สำหรับ IE 7 & 8 (และเบราว์เซอร์อื่น ๆ ที่ไม่มีการสนับสนุน CSS3 ไม่รวม IE6) คุณสามารถใช้สิ่งต่อไปนี้เพื่อรับลูกที่ 2 และ 3:

ลูกคนที่สอง:

td:first-child + td

ลูกคนที่สาม:

td:first-child + td + td

จากนั้นเพิ่มอีกหนึ่งรายการ+ tdสำหรับเด็กเพิ่มเติมแต่ละคนที่คุณต้องการเลือก

หากคุณต้องการรองรับ IE6 ก็สามารถทำได้เช่นกัน! คุณเพียงแค่ต้องใช้จาวาสคริปต์ (jQuery ในตัวอย่างนี้):

$(function() {
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    });
});

จากนั้นใน css ของคุณคุณเพียงแค่ใช้ตัวเลือกคลาสเหล่านั้นเพื่อทำการเปลี่ยนแปลงตามที่คุณต้องการ:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }