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

【问题标题】：Why last-child isn't working?为什么最后一个孩子不工作？
【发布时间】：2012-03-06 14:25:15
【问题描述】：

如您所知，我有一个问题需要您解决。
我扯掉了我所有的头发，试图弄清楚为什么 last-child 不起作用。
我试图用last-child 删除border-right，但由于某些原因，它没有成功。
Here's is the link

【问题讨论】：

它不起作用怎么办？我们到底要解决什么问题？我也没有看到任何使用 last-child 的 CSS 或 JavaScript。这使得这个问题注定是神秘的和没有答案的。 ;-)
@gregpettit 好的，添加它们

标签： css pseudo-class css-selectors

【解决方案1】：

您的选择器是#countdown .num:last-child。

你的 HTML 是

<ul ID="countdown">
  <li> <div ID="days" class="num">00</div>  <div CLASS="text">days</div>     </li>
  <li> <div ID="hours" class="num">00</div> <div CLASS="text">hours</div>    </li> 
  <li> <div ID="mins" class="num">00</div>  <div CLASS="text">minutes</div>  </li>
  <li> <div ID="secs" class="num">00</div>  <div CLASS="text">seconds</div>  </li>
  <div class="clear"></div>
</ul>

想一想：.num 是其父级的最后一个子级吗？答：没有。

您的选择器应该更像#countdown > li:last-of-type .num，在#countdown 中的最后一个li 中选择.num。

请注意，在这种情况下，必须使用 last-of-type 而不是 last-child，因为您有 <div class="clear"></div>，这是无效的 HTML（您不能在 ul 中直接使用 div） .

【讨论】：

如果您确实需要保留该 .clear 元素，请将其移动到结束 </ul> 标记之后。微不足道的修复。

【解决方案2】：

last-child 不起作用的主要原因是，在您的 #countdown UL 中，last-child 是 <div class="clear"></div> 而不是 LI。所以最好使用last-of-type 而不是last-child。像这样：

#countdown li:last-of-type .num,
  #countdown li:last-of-type .text{
    border:0;
  }

查看http://jsbin.com/apuhep/4/edit#html,live

【讨论】：

【解决方案3】：

在您的ul 元素中，在最后一个li 元素之后有一个div 元素。这是无效的标记，可能会产生不可预知的影响。此外，它可能使浏览器将div 元素视为ul 元素的最后一个子元素。

【讨论】：