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>标签做了同样的事情。

它应该使表格四舍五入。

现在我遇到了问题。

我的网站中有一个表格在最后一行隐藏了<td>，用户需要点击<th>行以显示<td>。

CSS假设我在<td>的最后一个孩子中有<tr>，所以它会被舍入。但问题在于它是隐藏的。

<th>位于用户实际看到的<tr>最后一个孩子中，但由于隐藏了最后一个<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 {}

Answer 2

您可以在td上使用：last-of-type 伪类。像td:last-of-type这样的东西应该有效。

最后一个孩子的CSS border-radius

2 个答案: