tr: nth-child (ngay cả) trợ giúp. làm thế nào để áp dụng cho một lớp học?

Tôi không giỏi lắm với CSS và tôi cần trợ giúp.tr: nth-child (ngay cả) trợ giúp. làm thế nào để áp dụng cho một lớp học?

Tôi có một bảng nơi tôi muốn mọi hàng khác có màu xám và các hàng xen kẽ sẽ có màu trắng. nhưng tôi chỉ muốn nó xảy ra trên một bảng cụ thể.

tôi đã thêm một số mã CSS của tôi:

tr:nth-child(even) { 
background: #CCC; 
} 

tr:nth-child(odd) { 
background: #FFF; 
}

nhưng vấn đề là ảnh hưởng của nó mỗi bảng trên trang web của tôi. Tôi chưa tìm thấy bất kỳ ví dụ nào trong đó nó chỉ áp dụng cho một lớp học nhất định. Điều đó có thể không? Tôi muốn nó chỉ áp dụng cho:

table.dashboardtable

Nguồn

2009-10-15 user190284

Sử dụng các combinator CSS hậu duệ (kề nhau) như thường lệ:

table.dashboardtable tr:nth-child(even) 
table.dashboardtable tr:nth-child(odd)

Nguồn

2009-10-15 01:09:59 hobbs

cảm ơn bạn! đây chính xác là những gì tôi cần. vì một lý do nào đó tôi đã đặt dấu chấm giữa bảng điều khiển và tr. những gì một sai lầm ngu ngốc. lol. – user190284

Tôi tưởng tượng rằng bạn nên sử dụng 'table.dashboardtable> tr: nth-child' (bộ chọn con'> '), để nếu bạn có các bảng lồng nhau, nó không vô tình áp dụng cho các bảng đó. –

nth-child và nth-of-type chấp nhận odd và even cũng như một công thức như an+b, nơi a và b là hằng số.

Thông thường bạn muốn sử dụng nth-of-type, chỉ áp dụng cho loại bạn chỉ định. Điều đó sẽ bỏ qua các yếu tố khác. Nếu bạn muốn mọi tr thậm chí có màu nền, sau đó thử:

tr:nth-of-type(2n){ 
    background: #CCC; 
} 

tr:nth-of-type(2n+1){ 
    background: #FFF; 
}

More info on CSS Selectors

Nguồn

2009-10-15 01:12:22 Marius

ive chỉ thử với ff3, nhưng lẻ và thậm chí là làm việc cho tôi. chuyển sang công thức chỉ trong trường hợp có các trình duyệt không hỗ trợ các từ mặc dù. cảm ơn! – user190284

Hy vọng điều này có ý nghĩa của nó.

<!DOCTYPE html> 

<html> 
    <head> 
    <style type="text/css"> 
     #customers tr:nth-child(even){ 
     background-color:white; 
     } 
     #customers tr:nth-child(odd){ 
     background-color:Lavender; 
     } 
    </style> 
    </head> 

    <body> 
    <p>In your markup define your table:</p> 
     <table id="customers"></table> 
    </body> 
</html>

Nguồn

2012-05-16 22:22:14 Scott

tr: nth-child (ngay cả) trợ giúp. làm thế nào để áp dụng cho một lớp học?

Trả lời

Các vấn đề liên quan