CSS: Tôi muốn nhắm mục tiêu từng trẻ một cách riêng biệt trong một vùng chứa

Question

Tôi muốn chỉ định các màu riêng biệt cho mỗi <td>. Một giải pháp là sử dụng các lớp, nhưng tôi không muốn tập trung vào HTML nếu một giải pháp chọn CSS đơn giản tồn tại.

HTML:

<tr> 
    <td>Item 1</td> 
    <td>Item 2</td> 
    <td>Item 3</td> 
    <td>Item 4</td> 
</tr> 

CSS:

/* item #1 */ 
{color: red} 

/* item #2 */ 
{color: blue} 

/* item #3 */ 
{color: green} 

Answer 1

Sử dụng Bộ chọn nth-child của CSS:

td:nth-child(1) { 
    color:blue; 
} 
td:nth-child(2) { 
    color:red; 
} 
td:nth-child(3) { 
    color:brown; 
} 
td:nth-child(4) { 
    color:green; 
} 

jsFiddle example

Answer 2

Bạn có thể sử dụng bộ chọn nth-child để xác định một yếu tố cụ thể (tính từ 1): td:nth-child(1) { color: red; }

http://jsfiddle.net/ayTmy/