.dgm-table-tbody tr:not([aria-hidden]) { background-color: #f2f6ff; }如何让这样选择的元素,只有偶数的子元素有背景颜色
时间: 2024-10-26 14:17:26 浏览: 29
DGM-1660--2021年Spring:学校
这个CSS规则`.dgm-table-tbody tr:not([aria-hidden])` 会选择所有非隐藏的`<tr>`元素,即数据行。要让这些元素中只有偶数索引的子元素(通常指偶数行,因为HTML行索引从0开始计数)有背景颜色,你需要修改规则来添加一个伪类`:nth-child(even)`。这里是修改后的样式:
```css
.dgm-table-tbody tr:not([aria-hidden]):nth-child(even) {
background-color: #f2f6ff;
}
```
这将应用背景颜色只给表格tbody部分中非隐藏的每两个连续行。如果你想要奇数行有不同的颜色,可以添加`:nth-child(odd)`:
```css
.dgm-table-tbody tr:not([aria-hidden]):nth-child(even) {
background-color: #f2f6ff;
}
.dgm-table-tbody tr:not([aria-hidden]):nth-child(odd) {
background-color: /* 另一种颜色 */;
}
```
阅读全文