我是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样式。
答案 0 :(得分:5)
或者,如果您不想放置id或类,您可以执行以下操作:
table tr:first-child td:last-child {}
请注意,并非所有浏览器都支持子选择器
答案 1 :(得分:1)
.TABLE-CLASS tr:first-child td:last-child{
//style
}
答案 2 :(得分: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>
答案 3 :(得分:0)
使用伪类 -
:first-child伪类表示“如果此元素是其父元素的第一个子元素”。 :last-child表示“如果此元素是其父元素的最后一个子元素”。请注意,只有元素节点(HTML标记)计数,这些伪类忽略文本节点。 所以这些样式对你有用 -
table tr td:last-child{
}
table tr td:first-child{
}
答案 4 :(得分:0)
如果每行只有2个<td>
,则可以使用CSS :last-child
选择器解决IE8中+
缺少支持的问题:
table tr:first-child td + td {
/* styles */
}
这会选择前面有另一个<td>
的任何<td>
,并且是每个<tr>
的第一个<table>
的孩子。