css - css 中第一个可见的 td 和最后一个可见的 td

Question

我正在尝试为 tr 中第一个和最后一个可见的 td 设置样式。 我可以使用 jquery 实现上述目标，但在我的情况下需要处理许多场景并且测试需要时间。

经过大量研究，我无法在 css 中得到任何东西。

是否有任何其他简单的 hack 或解决方法，以便我只能使用 css 实现。

下面是几个我试过的选项

.visible {
display : block;
}

.hidden {
display : none;
}

td:first-child {
}

td:last-child {
}

td.visible:first-child {
}

td.visible:last-child {
}

Answer 1

There is not in css move to backward,so we can't select td with class cant with pure css.

.hidden  {
  visibility: hidden;
}

.cant {
  background-color: orange!important;
}

tr td.hidden + td:not(.hidden) , tr td:not(.hidden):first-child { 
  background-color: red;
}

tr td.hidden + td:not(.hidden) ~ td , tr td:not(.hidden):first-child ~ td { 
  background-color: unset;
}

tr td:not(.hidden):last-child,tr td:not(.hidden):last-child {
  background-color: red!important;
}

<table border="1">
  <tr>
    <td class="hidden">This is TR1_TD1</td>
    <td>This is TR1_TD2</td>
    <td class="hidden">This is TR1_TD3</td>
    <td>This is TR1_TD4</td>
    <td>This is TR1_TD5</td>
  </tr>
 <tr>
    <td>This is TR2-TD1</td>
    <td class="hidden">This is TR2-TD2</td>
    <td class="hidden">This is TR2-TD3</td>
    <td class="cant">Can't with Pure Css</td>
    <td class="hidden">This is TR2-TD5</td>
  </tr>
</table>