html - 最后一个 child 的 CSS 边框半径

Question

我有这个代码:

tr:first-child th:last-child    {
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-left-radius: 15px;
}
tr:first-child th:first-child   {
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    border-top-right-radius: 15px;
}
tr:last-child th:last-child {
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-left-radius: 15px;
}
tr:last-child th:first-child    {
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-right-radius: 15px;
}

我对 <td> 做了同样的事情标签也是如此。

它应该使 table 变圆。

现在我有一个问题。

我的网站中有一张表隐藏了 <td>在最后一行，用户需要点击 <th>显示它们的线 <td> .

CSS 假设我有 <td>在 <tr> 的最后一个 child 中所以它变圆了。但问题是它是隐藏的。

<th>在<tr>用户实际看到的 last-child，但由于最后一个 <td> 而没有四舍五入这是隐藏的，看起来很糟糕。

有什么建议吗？

Answer 1

使用nth-last-child .它从末尾选择 rx+n 的每个元素。 (:nth-last-child(r+n) 或只是 :nth-last-child(n)(假设 r 为 0))

tr:nth-last-child(2) th:last-child {}