html - Angularjs 表 nth-of-type

Question

我正在尝试使用 nth-of-type 更改包含 angularjs 表中行索引号的圆圈的背景颜色

html

<table class="section-table">
    <tr ng-repeat="defect in defects">
        <td width="10%"><div class="count-circle">{{$index + 1}}</div></td>
        <td width="40%">{{ defect.name }}</td>
        <td width="10%">
            <i style="color:#00C853" class="far fa-comment fa-lg"></i>&nbsp;&nbsp;{{ defect.defect_count }}
        </td>
        <td width="20%"><span class="pull-right">{{ defect.date }}</span></td>
        <td width="20%"><button class="btn-details pull-right">Details</button>
    </tr>
</table>

CSS

.section-table tr td div.count-circle:nth-of-type(5n+1) {
    background-color: blue;
}

.section-table tr td div.count-circle:nth-of-type(5n+2) {
    background-color: yellow;
}

.section-table tr td div.count-circle:nth-of-type(5n+3) {
    background-color: black;
}

我可以让 tr 改变颜色和 td 但我不能让 count-circle 类改变颜色，有人可以帮忙吗？

Answer 1

你正在重复 tr 所以你的代码应该是这样的:

.section-table tr:nth-of-type(5n+1) td div.count-circle {
    background-color: blue;
}

.section-table tr:nth-of-type(5n+2) td div.count-circle {
    background-color: yellow;
}

.section-table tr:nth-of-type(5n+3) td div.count-circle {
    background-color: black;
}