Question

我试图让我的桌子td是一个与最后一个td分开的边框底部。我哪里错了？

CSS

.rack  {
    border-left: 15px solid #959595;
}

.rack td {
    border-bottom: 15px solid #f05f28;
    width:100%;
}

.rack td:last-child {
   border-bottom: none;
}

HTML

<table class="rack" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

FIDDLE

Answer 1

问题是你误解了:last-child选择器的工作原理。

根据MDN：

:last-child CSS伪类表示任何元素，它是其父元素的最后一个子元素。

您使用.rack td:last-child正在做的是选择<td>作为其父亲<tr>的最后一个孩子，意味着所有这些。

只需选择<tr>（或:last-child）:last-of-type，然后选择它的孩子<td>：

.rack tr:last-child td {
   border-bottom: none;
}

JSFiddle Demo

Answer 2

您应该将.rack td:last-child替换为.rack tr:last-child td。 :last-child应用于相对于其各自父元素的最后一个子元素，因此您要选择 last td 的tr。

为什么最后一个孩子不工作？

2 个答案: