html - 使一个表格行垂直对齐到中间，另一个垂直对齐到顶部的最少代码？

Question

我有一张 table ，假设有 3 行，我希望前两个与顶部垂直对齐，第二个与中间垂直对齐。

如果我尝试定义:

td {vertical-align:top}
tr.middle {vertical-align:middle}

并在 html 中分配 class="middle"到相关<tr> ,它不起作用，因为 td 定义会持续存在。

我唯一能做的就是定义

td.top {vertical-align:top}
td.middle {vertical-align:middle}

然后将相关类分配给每个单独的 td，代码太多了。

有什么方法可以用最少的代码做到这一点？

Answer 1

只需执行此操作，无需编辑 HTML 或添加类。

tr:nth-child(1) td {vertical-align:top;}
tr:nth-child(2) td {vertical-align:middle;}
tr:nth-child(3) td {vertical-align:bottom;}

演示 http://jsfiddle.net/v68ao3pv/1

如果您需要 IE8 支持:

tr:first-child td           {vertical-align:top;}
tr:first-child + tr td      {vertical-align:middle;}
tr:first-child + tr + tr td {vertical-align:bottom;}

演示 http://jsfiddle.net/v68ao3pv/2/show