0

我是 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风格。

4

5 回答 5

5

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

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

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

于 2013-08-21T09:39:28.617 回答
1 
.TABLE-CLASS tr:first-child td:last-child{
   //style
}
于 2013-08-21T09:42:19.367 回答
1

使用 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>
于 2013-08-21T10:51:31.270 回答
0

使用伪类 -

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

table tr td:last-child{
}

table tr td:first-child{

}
于 2013-08-21T09:42:32.480 回答
0

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

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

这将选择任何<td>在另一个之前并且是each<td>的第一个子的任何内容。<tr><table>

于 2013-08-21T09:43:00.380 回答