86

问题在于这个 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 行中的任何一行都不应该以“完整”类的最后一个 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>

4

3 回答 3

148

选择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-typeandlast-of-type选择器选择父级下每种类型的第一个/最后一个元素。

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

于 2013-09-25T02:57:22.723 回答
142

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

除了 Harry 的回答之外，我认为添加/强调 :last-child 如果元素不是容器中的 VERY LAST 元素将不起作用是至关重要的。无论出于何种原因，我花了几个小时才意识到这一点，即使 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元素不是其父元素中的最后一个元素。

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

于 2017-02-04T04:37:38.547 回答
14

我遇到类似的情况。我希望.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;
}

这对我来说很奇怪，因为 item 的 nth-last-child 假设是最后一个 item 的第二个，但它有效，我得到了我期望的结果。我从CSS Trick中找到了这个有用的技巧

于 2019-04-19T15:29:22.987 回答