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

您正在重复num_units，因此您的代码应如下所示：

tr

Angularjs表nth-of-type

1 个答案: