：最后一个孩子不能按预期工作？

Question

问题出在此CSS和HTML之内。这是带有示例代码的jsFiddle的链接。的HTML<ul>    <li class"complete">1</li>    <li class"complete">2</li>    <li>3</li>    <li>4</li></ul>的CSSli.complete:last-child {    background-color:yellow;}li.complete:last-of-type {    background-color:yellow;}这两行CSS都不应该针对带有“ complete”类的最后一个li元素吗？jQuery中的此查询也不针对它：$("li.complete:last-child");但这确实做到了：$("li.complete").last();li {  background-color: green;}li.complete:first-child {  background-color: white;}li.complete:first-of-type {  background-color: red;}li.complete:last-of-type {  background-color: blue;}li.complete:last-child {  background-color: yellow;}<ul>  <li class="complete">1</li>  <li class="complete">2</li>  <li>3</li>  <li>4</li></ul>

Answer 1

如果该元素不是VERY LAST元素，则：last-child将不起作用

除了哈利的答案，我认为添加/强调：如果元素不是容器中的VERY LAST元素，则：last-child将不起作用也至关重要。不管出于什么原因，我花了数小时才意识到这一点，即使Harry的回答很彻底，我也无法从“最后一个孩子选择器用于选择父母的最后一个孩子元素”中提取信息。

假设这是我的选择器： a:last-child {}

这有效：

<div>

    <a></a>

    <a>This will be selected</a>

</div>

这不是：

<div>

    <a></a>

    <a>This will no longer be selected</a>

    <div>This is now the last child :'( </div>

</div>

这不是因为a元素不是其父元素内的最后一个元素。

可能很明显，但这不适合我...

Answer 2

我遇到类似的情况。我想让最后一个背景.item变成黄色，看起来像...

<div class="container">

  <div class="item">item 1</div>

  <div class="item">item 2</div>

  <div class="item">item 3</div>

  ...

  <div class="item">item x</div>

  <div class="other">I'm here for some reasons</div>

</div>

我nth-last-child(2)用来实现它。

.item:nth-last-child(2) {

  background-color: yellow;

}

我觉得很奇怪，因为第n个倒数第二个孩子应该是最后一个倒数第二个孩子，但是它可以工作，并且我得到了我期望的结果。我从CSS技巧中发现了这个有用的技巧