如何连续选择第一个和最后一个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;}

使用以下伪类:

:first-child 表示"如果它是其父元素的第一个子元素,则选择此元素".

:last-child表示"如果它是父元素的最后一个子元素,则选择此元素".

只有元素节点(HTML标记)受到影响,这些伪类忽略文本节点.

Answer 3

你可以使用:first-child和:last-child 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

如果您使用 sass(scss)，您可以使用以下代码片段：

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