Question

我是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样式。

Answer 1

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

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

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

Answer 2

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

Answer 3

使用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>

Answer 4

使用伪类 -

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

table tr td:last-child{
}

table tr td:first-child{

}

Answer 5

如果每行只有2个<td>，则可以使用CSS :last-child选择器解决IE8中+缺少支持的问题：

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

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

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

5 个答案: