Kiểu cột <td> đầu tiên của bảng khác nhau

Question

Nếu tôi có table với hai cột, làm cách nào để chỉ định padding hoặc bất kỳ css nào khác để nó được áp dụng chỉ cho cột đầu tiên <td> s. Ngoài ra, làm cách nào để tạo kiểu cho cột n-th tương tự?

Answer 1

Bạn có thể sử dụng n-th child selector.

để nhắm mục tiêu các yếu tố thứ n sau đó bạn có thể sử dụng:

td:nth-child(n) { 
    /* your stuff here */ 
} 

Answer 2

Điều này sẽ hữu ích. CSS3 của nó: con đầu tiên, nơi bạn nên nói rằng tr đầu tiên của bảng bạn muốn tạo kiểu. http://reference.sitepoint.com/css/pseudoclass-firstchild

Answer 3

Nếu bạn đã hỗ trợ IE7, một giải pháp tương thích hơn là:

/* only the cells with no cell before (aka the first one) */ 
td { 
    padding-left: 20px; 
} 
/* only the cells with at least one cell before (aka all except the first one) */ 
td + td { 
    padding-left: 0; 
} 

Ngoài ra hoạt động tốt với li; bộ chọn anh chị em chung ~ có thể phù hợp hơn với các yếu tố hỗn hợp như tiêu đề h1, theo sau là đoạn văn và phân nhóm và sau đó một lần nữa các đoạn văn khác.

Answer 4

Các : nth-con() và : nth-of-type() pseudo-classes cho phép bạn chọn các yếu tố với một công thức.

Cú pháp là : nth-child (an + b), nơi bạn thay thế a và b theo số bạn chọn.

Ví dụ: nth-child (3n + 1) chọn trẻ thứ 1, thứ 4, thứ 7, v.v.

td:nth-child(3n+1) { 
    /* your stuff here */ 
} 

: nth-of-type() hoạt động tương tự, ngoại trừ việc nó chỉ xem xét yếu tố của loại nhất định (trong ví dụ).

Answer 5

Để chọn cột đầu tiên của một bảng, bạn có thể sử dụng cú pháp này

tr td: nth-con (1N + 2) {padding-left: 10px;}