如何在第一个tr上的特定TD上应用CSS

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 +选择器来避免对IE8中的:last-child缺乏支持：

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

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