html - 最后一个子元素的 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>用户实际看到的最后一个 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 {}