0

假设您有一个包含 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");
    }
  });                            
});

这是我创建的小提琴。

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

4

3 回答 3

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/

于 2013-05-07T05:44:53.890 回答
1

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

见jsFiddle

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

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

于 2013-05-07T05:47:59.350 回答
0

尝试这个：

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

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

于 2013-05-07T05:51:22.267 回答