如何選擇連續的第一個和最後一個TD？

Question

如何連續選擇第一個和最後一個TD？

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

Answer 1

您可以使用:first-child和:last-child僞選擇：

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

這應該在所有主要瀏覽器，但IE7具有元素時動態添加一些問題（和它不會工作在IE6中）。

Answer 2

您可以使用下面的代碼片段：

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

使用下面的僞類：

：第一胎的意思是「選擇這個元素，如果它是其父的第一個孩子 」。

：最後一個孩子的意思是「選擇這個元素，如果它是最後一個孩子它的父母」。

只有元素節點（HTML標記）受到影響，這些僞類忽略文本節點。

Answer 3

您可以使用：第一胎和：最後一個孩子pseudo-selectors：

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

或者你可以用其他的方式像

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

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

兩種方式都可以正常使用

Answer 4

如果該行包含一些前導（或尾隨）th在td之前的標籤你應該使用:first-of-type和:last-of-type選擇器。否則，如果第一個td不是該行的第一個元素，則不會選擇第一個td。

這給：

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