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

Question 1

问题出在此CSS和HTML之内。这是jsFiddle的链接带有示例代码的。

的HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

的CSS

li.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>

Expand snippet

Question 2

该last-child选择器用于选择父的最后一个子元素。它不能用于选择给定父元素下具有特定类的最后一个子元素。

复合选择器的另一部分（位于之前:last-child）指定了额外的条件，最后一个子元素必须按顺序满足才能被选择。在下面的代码段中，您将看到所选元素如何根据复合选择器的其余部分而有所不同。

显示代码段

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}

<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

Expand snippet

为了回答您的问题，下面将li使用背景颜色将最后一个子元素设置为红色。

li:last-child{
    background-color: red;
}

但是以下选择器将不适用于您的标记，因为即使它是，last-child也没有。class='complete'li

li.complete:last-child{
    background-color: green;
}

如果（且仅当）li标记中的最后一个也有时，它才有效class='complete'。

要在评论中解决您的查询：

@Harry我觉得很奇怪：.complete：last-of-type不起作用，但是.complete：first-of-type起作用，而不管它是父元素的位置如何。谢谢你的帮助。

选择器.complete:first-of-type之所以起作用，是因为选择器（即带有的元素class='complete'）仍然li是父级中类型的第一个元素。尝试添加<li>0</li>作为的第一个元素ul，您也会发现它first-of-type也失败了。这是因为first-of-type和last-of-type选择器会选择父项下每种类型的第一个/最后一个元素。

有关选择器如何工作的更多详细信息，请参阅此线程中BoltClock发布的答案。那是尽可能全面的:)

Question 3

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

除了哈利的答案，我认为添加/强调：如果该元素不是容器中的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元素不是其父元素中的最后一个元素。

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

Question 4

我遇到类似的情况。我想让最后一个背景.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;
}

It strange to me because nth-last-child of item suppose to be the second of the last item but it works and I got the result as I expect. I found this helpful trick from CSS Trick