Làm thế nào để chọn TD đầu tiên và cuối cùng trong một hàng?

Làm thế nào bạn có thể chọn đầu tiên và cuối cùng TDliên tiếp?

tr > td[0],
tr > td[-1] {
/* styles */
}

Bạn có thể sử dụng :first-childvà :last-childbộ chọn giả:

tr td:first-child,
tr td:last-child {
    /* styles */
}

Điều này sẽ hoạt động trong tất cả các trình duyệt chính, nhưng IE7 có một số vấn đề khi các yếu tố được thêm động (và nó sẽ không hoạt động trong IE6).

Bạn có thể sử dụng đoạn mã sau:

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

Sử dụng các lớp giả sau:

: First-child có nghĩa là "chọn phần tử này nếu nó là con đầu tiên của cha mẹ".

: last-child có nghĩa là "chọn phần tử này nếu nó là con cuối cùng của cha mẹ".

Chỉ các nút phần tử (thẻ HTML) bị ảnh hưởng, các lớp giả này bỏ qua các nút văn bản.

Bạn có thể sử dụng : con đầu tiên và : con cuối cùng pseudo-selectors :

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

Hoặc bạn có thể sử dụng cách khác như

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

Cả hai cách đều hoạt động hoàn hảo

Nếu bạn sử dụng sass (scss), bạn có thể sử dụng đoạn mã sau:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

Nếu hàng chứa một số thẻ hàng đầu (hoặc dấu) thtrước thì tdbạn nên sử dụng :first-of-typevà các :last-of-typebộ chọn. Mặt khác, đầu tiên tdsẽ không được chọn nếu nó không phải là phần tử đầu tiên của hàng.

Điều này mang lại:

td:first-of-type, td:last-of-type {
    /* styles */
}