css 定位所有 tr（偶数和奇数）而不是 td 和 th 以添加复杂的背景图像（线性渐变（））

Question

我找不到一个简单的CSS解决方案来仅针对表中的tr，忽略所有子项（td和th）以使用background-image：linear-gradient（）。

这个解决方案：

table-name tr:nth-child(even) 

为所有 td 和 th 添加背景。

我只想定位每一行（tr），这取决于我的偶数或奇数，这将是表中的直接子代。

我尝试

table-name:nth-child(odd or even)

或

table-name > *:nth-child(odd or even)

它们不起作用

javascript是唯一的解决方案吗？ 真奇怪，W3C 没有想到这一点

Answer 1

这是一个表格，其中

tr

元素设置为具有线性渐变背景。你的意思是这个吗？

table{
  border-collapse: collapse;
}

table tr {
  background:linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
             linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
             linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

table tr td {
  border: 1px solid #333; 
  padding: 1rem;
}

<table>
  <tr>
    <td>1:1</td><td>1:2</td><td>1:3</td>
  </tr>
  <tr>
    <td>2:1</td><td>2:2</td><td>2:3</td>
  </tr>
  <tr>
    <td>3:1</td><td>3:2</td><td>3:3</td>
  </tr>
  <tr>
    <td>4:1</td><td>4:2</td><td>4:3</td>
  </tr>
</table>