：最后一个孩子没有按预期工作？

问题出在 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 行中的任何一行都不应该以last li element with the “complete” class？

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>

答案

这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>

为了回答你的问题，下面将设置最后一个孩子的样式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 发布的答案，在这线程以获取有关选择器如何工作的更多详细信息。

来自: stackoverflow.com

答案#

答案