Câu trả lời:
Đối với các trình duyệt hiện đại, sử dụng td:nth-child(2)cho thứ hai tdvà td:nth-child(3)thứ ba. Hãy nhớ rằng những cái này lấy thứ hai và thứ ba td cho mỗi hàng .
Nếu bạn cần khả năng tương thích với IE cũ hơn phiên bản 9, hãy sử dụng các trình kết hợp anh chị em hoặc JavaScript theo đề xuất của Tim . Cũng xem câu trả lời của tôi cho câu hỏi liên quan này để được giải thích và minh họa về phương pháp của mình.
td:nth-of-type(3)là tốt hơn. td:nth-child(3)sẽ phù hợp với một yếu tố đó là cả một td và con thứ tư của mẹ, không phụ thuộc vào loại yếu tố của hai anh chị em trước đây của nó . td:nth-of-type(3)sẽ có được phần ba td, bất kể có bao nhiêu tdphần tử không nằm trước nó . Nếu không có tdphần tử nào trước phần tử bạn muốn, cả hai bộ chọn sẽ khớp với cùng một thứ.
Đối với IE 7 & 8 (và các trình duyệt khác không hỗ trợ CSS3 không bao gồm IE6), bạn có thể sử dụng các cách sau để có được con thứ 2 và thứ 3:
Con thứ 2:
td:first-child + tdCon thứ 3:
td:first-child + td + tdSau đó, chỉ cần thêm một cái khác + tdcho mỗi đứa trẻ bổ sung mà bạn muốn chọn.
Nếu bạn muốn hỗ trợ IE6 cũng có thể được thực hiện! Bạn chỉ cần sử dụng một ít javascript (jQuery trong ví dụ này):
$(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");
});
});Sau đó, trong css của bạn, bạn chỉ cần sử dụng các bộ chọn lớp đó để thực hiện bất kỳ thay đổi nào bạn muốn:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }