在设置时混合背景颜色

Question

当桌子中的奇数行和偶数行的背景略有不同以改善方向时，每个人都喜欢：

但有时候，还需要突出显示列：

可以让这两个设置自动混合吗？你知道，我可以通过为每个类设置两种颜色来手动完成：

tr:nth-child(odd) td {
  background-color: #CFDCFF;
}
tr:nth-child(even) td {
  background-color: #E2E4E4;
}
tr:nth-child(odd) td.result {
  background-color: #??????;
}
tr:nth-child(even) td.result {
  background-color: #??????;
}

但是自动化会使代码更具可读性。

Answer 1

在我测试的浏览器（Chrome，Safari，Firefox）上，可以将灰色和蓝色背景应用于行本身，然后在表格单元格上覆盖略微透明的黄色和绿色背景。看起来很可怕：/

tr:nth-child( odd ) {
  background-color: #CFDCFF;
}

tr:nth-child( even ) {
  background-color: #E2E4E4;
}

tr > :not( :first-child ):not( :last-child ) {
  background: rgba( 255, 255, 0, .15 );
}

tr > :last-child {
  background: rgba( 0, 255, 0, .15 );
}

table {
    border-spacing: 0;
}

th, td {
    padding: .25em;
}

<table>
    <tr>
        <th># <th>a <th>b <th>c <th>d <th>e <th>f <th>Result
    <tr>
        <th>0 <td>0 <td>0 <td>0 <td>0 <td>0 <td>0 <td>0
    <tr>
        <th>1 <td>0 <td>0 <td>0 <td>0 <td>0 <td>1 <td>1
    <tr>
        <th>2 <td>0 <td>0 <td>0 <td>0 <td>1 <td>0 <td>1
    <tr>
        <th>3 <td>0 <td>0 <td>0 <td>0 <td>1 <td>1 <td>1
    <tr>
        <th>4 <td>0 <td>0 <td>0 <td>1 <td>0 <td>0 <td>1

Answer 2

不确定它会使代码更具可读性......但您可以在每个最后一个列单元格中添加一个伪元素，并在其上设置rgba背景。 这个解决方案与@CBroe建议的解决方案有相同的问题（见评论），正如他在评论中指出的那样，它限制了你某些颜色。

无论如何这里是css：

tr:nth-child(odd) td {
  background-color: #CFDCFF;
}
tr:nth-child(even) td {
  background-color: #E2E4E4;
}

td.results{position:relative;}
td.results:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0,0,0,.2);
}

Answer 3

使用伪选择器，您可以为每个单元格制作自定义颜色...如果您仍然需要突出显示类，您还可以为每个单元格设置颜色

tr（单数）＆gt; td（单数），

tr（单数）＆gt; td（偶数），

tr（偶数）＆gt; td（单数）

和tr（偶数）＆gt; TD（偶数）

table {
  border-spacing: 1px;
  border: 1px solid blue;
}
td {
  padding: 5px;
  background: #aaf;
}
td:nth-child(even) {
  background: #bbf;
}
tr:nth-child(even) td {
  background: #afa;
}
tr:nth-child(even) td:nth-child(even) {
  background: #bfb;
}

<table>
  <tr><td>Item</td><td>a</td><td>b</td><td>c</td><td>d</td></tr>
  <tr><td>Item</td><td>a</td><td>b</td><td>c</td><td>d</td></tr>
  <tr><td>Item</td><td>a</td><td>b</td><td>c</td><td>d</td></tr>
  <tr><td>Item</td><td>a</td><td>b</td><td>c</td><td>d</td></tr>
  <tr><td>Item</td><td>a</td><td>b</td><td>c</td><td>d</td></tr>
  <tr><td>Item</td><td>a</td><td>b</td><td>c</td><td>d</td></tr>
</table>