gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:08:00 24 4
gpt4 key购买 nike

我正在尝试为 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 {
}

最佳答案

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>

关于css - css 中第一个可见的 td 和最后一个可见的 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50443591/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com