CSS Safari：目标表tr（偶数和奇数）忽略td和th以添加背景线性渐变

Question

我想为 PostList 页面定义一种新的 WordPress 管理风格。 我不知道 CSS 3 是否有一个属性允许使用线性渐变的背景图像在整个 css“表格行”中显示，而不是在每个 TR 中独立显示。 到目前为止，我所有的尝试都失败了。 也许 CSS4 会允许这样做？

我找不到一个简单的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>

Answer 2

我找到了一个解决方案，但它不适用于 safari wordpress 帖子列表页面，但 Chrome、edge、firefox 工作正常。我还没有找到 safari 的解决方案

table tr:nth-child(odd or even)::before

我把问题和解决方案放在下面的代码片段中 谢谢你的回答。

table,
.tb2 {
  width: 100%;
  height: auto;
}
.tb2 {
  border-top: 5px solid;
  position: relative;
}
tr {
  width: 150px;
  height: 30px;
}
table:not(.tb2) tr:nth-child(odd) {
  background-image: linear-gradient(90deg, rgb(173, 173, 173), rgb(77, 77, 77)),
    linear-gradient(
      135deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      0deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      45deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ) !important;
  background-blend-mode: overlay, overlay, overlay, normal;
}
.tb2 tr:nth-child(odd)::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30px;
  background-image: linear-gradient(90deg, rgb(173, 173, 173), rgb(77, 77, 77)),
    linear-gradient(
      135deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      0deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ),
    linear-gradient(
      45deg,
      rgb(71, 29, 127) 0%,
      rgb(71, 29, 127) 52%,
      rgb(99, 59, 126) 52%,
      rgb(99, 59, 126) 54%,
      rgb(126, 89, 125) 54%,
      rgb(126, 89, 125) 56%,
      rgb(154, 118, 125) 56%,
      rgb(154, 118, 125) 64%,
      rgb(181, 148, 124) 64%,
      rgb(181, 148, 124) 82%,
      rgb(209, 178, 123) 82%,
      rgb(209, 178, 123) 100%
    ) !important;
  background-blend-mode: overlay, overlay, overlay, normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
<table class="tb2">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

Safari 如何使用线性背景渲染表格 tr ：