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

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>

小提琴

Answer 1

问题是您误解了

:last-child

选择器的工作原理。

根据MDN：

:last-child

CSS 伪类表示作为其父元素的最后一个子元素的任何元素。

您对

.rack td:last-child

所做的操作是选择

<td>

，它是其父级

<tr>

的最后一个子级，因为您的 HTML 每个

<td>

只有一个

<tr>

，那么这会匹配 中的每个

<td>

表。

只需选择

<tr>

即

:last-child

（或

:last-of-type

），然后选择它的子

<td>

:

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

JSFiddle 演示

Answer 2

您应该将

.rack td:last-child

替换为

.rack tr:last-child td

。

:last-child

应用于相对于其各自父元素的最后一个子元素，因此您需要选择

last 

td

 的 

tr。