html - 根据背景设置表格最后一个元素的边框

Question

我有一个只显示键值对的表。相同的 HTML 代码是:

<div class="kvp-data-table">
<div class="table-container" *ngFor="let keyValuePair of keyValuePairs; let i = index">
    <div class="key-value-container"
         fxFlex
         fxLayout="row">
        <div class="key-container"
             [fxFlex]="widthOfColumnInPercent">
            {{ keyValuePair.key | translate}}
        </div>
        <div class="separator">
        </div>
        <div class="value-container"
             [fxFlex]="widthOfColumnInPercent">
            {{ keyValuePair.value | translate}}
        </div>
    </div>
</div>

现在对于这个表，我想用不同的颜色为交替行着色。为此，我使用 :nth-child() CSS 选择器，如下所示:

.kvp-data-table {

.separator {
    width: 2px;
    background: #E2E2E2;
}

.key-container {
    padding: 12px;
    font-family: '72';
    word-wrap: break-spaces;
}

.value-container {
    padding: 12px;
    font-family: '72';
    word-wrap: break-spaces;
}

.table-container:nth-child(2n) {
    background: #FFFFFF;
}

.table-container:nth-child(2n+1) {
    background: #F2F2F2;
}
}

除此之外，如果最后一行有白色背景，我想用水平灰色线结束表格。如果表格输出的列表包含偶数个元素，则最后一行的背景为白色。

现在我知道 :last-child() 选择器存在，但我不知道它如何有条件地应用在这里。

我如何实现这一目标？

Answer 1

你可以使用 :last-child:not(:nth-child(even))

此外，您可以使用 :nth-child(even ) 和 :nth-child(odd)

综合:

.table-container:nth-child(even) {
  background: #FFFFFF;
}

.table-container:nth-child(odd) {
  background: #F2F2F2;
}

/* .table-container:last-child:nth-child(odd) also obtains */
.table-container:last-child:not(:nth-child(even)) {
  border-bottom: 2px solid grey;
}