Question

假设您有一个包含3列的HTML表，并且您希望前两列的字体大小不同，则表示小，而最后一列或第三列的大小为中等。现在，我在该列中有很多行说10行，这意味着我有30个<td>元素（3 x 10）。现在我不想为前两列中具有小尺寸字体的每个<td>添加一个类名，而再次使用中等大小字体添加第三列。但是我不想为每个TD创建类属性/属性来实现它。所以，我创建了一个jquery，就像下面那样：

$(document).ready(function() {
  $('table.secondtable td').each(function(index) {
    if ((index+1)%3==0) {
      $(this).addClass("mediumfont");
    } else {
      $(this).addClass("smallfont");
    }
  });                            
});

这是我创建的fiddle。

所以，我的问题是你们中的任何人都可以向我展示这个版本的HTML版本，而不必诉诸于jquery或至少更短版本的jquery代码吗？

Answer 1

您可能想要使用td:last-child

.smallfont {font-size:1.0em;}
.mediumfont {font-size:1.5em;}
td { font-size: 1.0em; }
td:last-child { font-size: 1.5em; }

你的小提琴在这里：http://jsfiddle.net/gG5Lt/

Answer 2

您可以使用css3 :nth-child(index)选择器..

请参阅jsFiddle

td {font-size:1.0em;}
td:nth-child(3) {font-size:1.5em;}

注意：只有现代浏览器才支持此属性。

Answer 3

试试这个：

td {font-size:1.0em;}
td:nth-child(3n+3) {font-size:1.5em;}

阅读css3技巧http://css-tricks.com/how-nth-child-works/

替代jquery代码或HTML

3 个答案: