如何在第一个 tr 的特定 td 上应用 css答案

【问题标题】：how to apply css on specific td on first tr如何在第一个 tr 的特定 td 上应用 css
【发布时间】：2013-08-21 18:51:31
【问题描述】：

我是AngularJS的初学者，真的不想用JQuery来解决我的问题（也许我错了）。

这是我的问题：

我想在表格的第一个 tr 中的最后一个 td 元素上应用 CSS。

我的代码：

<table>
    <tr ng-repeat="person in persons | orderBy:'name'">
        <td>{{person.name}}</td>
        <td>{{person.email}}</td>
    </tr>
</table>

所以对于第一个 tr，最后一个 td 元素应该是<td class="myClass">{{person.email}}</td>

感谢您的回答和解释。

编辑：我忘了说，我知道如何通过在最后一个 td 上应用 css 来解决我的问题，但我想用 angularjs 来解决，因为我可以有不同的人，根据不同，我想应用另一种 CSS 样式。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

或者，如果您不想放置 id 或类，您可以执行以下操作：

table tr:first-child td:last-child {}

请注意，并非所有浏览器都支持子选择器

【讨论】：

【解决方案2】：

使用 Angular 的 ng-class 指令有条件地应用样式：

<table>
    <tr ng-repeat="person in persons | orderBy:'name'">
        <td>{{person.name}}</td>
        <td ng-class="{'myClass':$index==0}">{{person.email}}</td>
    </tr>
</table>

【讨论】：

【解决方案3】：

.TABLE-CLASS tr:first-child td:last-child{
   //style
}

【讨论】：

【解决方案4】：

使用伪类 -

:first-child 伪类表示“如果此元素是其父元素的第一个子元素”。 :last-child 表示“如果此元素是其父元素的最后一个子元素”。请注意，只有元素节点（HTML 标记）计算在内，这些伪类忽略文本节点。所以这些风格对你有用 -

table tr td:last-child{
}

table tr td:first-child{

}

【讨论】：

【解决方案5】：

如果每行中只有 2 个<td>，您可以通过使用 CSS + 选择器来解决 IE8 中对 :last-child 的不支持问题：

table tr:first-child td + td {
  /* styles */
}

这将选择前面有另一个<td> 并且是每个<table> 的第一个<tr> 的子级的任何<td>。

【讨论】：