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

【问题标题】：Set border of last element of a table based on background根据背景设置表格最后一个元素的边框
【发布时间】：2018-09-25 18:59:14
【问题描述】：

我有一个只显示键值对的表。相同的 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() 选择器存在，但我不知道它会如何有条件地应用在这里。

我如何做到这一点？

【问题讨论】：

目前似乎可以使用上述代码 - stackblitz.com/edit/angular-nfdkzz?file=src/app/…
如果表格输出的是偶数个元素的列表，最后一行将有白色背景，而您正试图将其设为灰色.. 是吗？？

标签： html css typescript

【解决方案1】：

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

此外，您可以使用 :nth-child(even) 和 :nth-child(odd) 代替 :nth-child(2n) 和 :nth-child(2n+1)

把它放在一起：

.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;
}

【讨论】：