我有一个只显示键值对的表。 相同的 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()
选择器存在,但我不知道它如何有条件地应用在这里。
我如何实现这一目标?
最佳答案
你可以使用 :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;
}
关于html - 根据背景设置表格最后一个元素的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52505090/