Question

如你所知，我遇到了一个让你解决的问题我扯掉了所有的头发，试图弄清楚为什么last-child不起作用我尝试使用border-right移除last-child但由于某些原因，它无法解决问题 Here's is the link

Answer 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，在.num中的最后li内选择#countdown。

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

Answer 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

Answer 3

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

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

3 个答案: