Html :last-child 没有按预期工作？

:last-child not working as expected?

提问by Nej Kutcharian

The issue lies within this CSS and HTML. Here is a link to jsFiddlewith the sample code.

问题在于这个 CSS 和 HTML。这是带有示例代码的jsFiddle的链接。

HTML

HTML

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

CSS

CSS

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

li.complete:last-of-type {
    background-color:yellow;
}

Shouldn't either of these lines of CSS target the last li element with the "complete" class?

这些 CSS 行中的任何一行都不应该以“完整”类为目标的最后一个 li 元素吗？

This query in jQuery doesn't target it either:

jQuery 中的这个查询也没有针对它：

$("li.complete:last-child");

But this one does:

但这个确实：

$("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>

回答by Harry

The last-childselector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

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

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

复合选择器的另一部分（附加在 之前: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>

---

---

To answer your question, the below would style the last child lielement with background color as red.

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

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

But the following selector would not work for your markup because the last-childdoes not have the class='complete'even though it is an li.

但是，下面的选择不会为你的标记工作，因为last-child不具备class='complete'，即使它是一个li。

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

It would have worked if (and only if) the last liin your markup also had class='complete'.

如果（且仅当）li您的标记中的最后一个也有class='complete'.

---

---

To address your query in the comments:

要在评论中解决您的问题：

@Harry I find it rather odd that: .complete:last-of-type does not work, yet .complete:first-of-type does work, regardless of it's position it's parents element. Thanks for your help.

@Harry 我觉得很奇怪： .complete:last-of-type 不起作用，但是 .complete:first-of-type 确实起作用，无论它的位置是它的父元素。谢谢你的帮助。

The selector .complete:first-of-typeworks in the fiddle because it (that is, the element with class='complete') is still the first element of type liwithin the parent. Try to add <li>0</li>as the first element under the uland you will find that first-of-typealso flops. This is because the first-of-typeand last-of-typeselectors select the first/last element of each type under the parent.

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

Refer to the answer posted by BoltClock, in thisthread for more details about how the selector works. That is as comprehensive as it gets :)

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

回答by Govind Rai

:last-child will not work if the element is not the VERY LAST element

如果元素不是最后一个元素，:last-child 将不起作用

In addition to Harry's answer, I think it's crucial to add/emphasize that :last-child will not work if the element is not the VERY LAST element in a container. For whatever reason it took me hours to realize that, and even though Harry's answer is very thorough I couldn't extract that information from "The last-child selector is used to select the last child element of a parent."

除了 Harry 的回答之外，我认为添加/强调 :last-child 如果元素不是容器中的最后一个元素将不起作用是至关重要的。无论出于何种原因，我花了几个小时才意识到这一点，即使 Harry 的回答非常彻底，我也无法从“最后一个子选择器用于选择父级的最后一个子元素”中提取该信息。

Suppose this is my selector: a:last-child {}

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

This works:

这有效：

<div>
    <a></a>
    <a>This will be selected</a>
</div>

This doesn't:

这不会：

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

It doesn't because the aelement is not the last element inside its parent.

不是因为该a元素不是其父元素中的最后一个元素。

It may be obvious, but it was not for me...

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

回答by worrawut

I encounter similar situation. I would like to have background of the last .itemto be yellow in the elements that look like...

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

I use nth-last-child(2)to achieve it.

我用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

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

回答by Nikhil salwe

As last-child is used to select the last child element of a parent element. you can achieve same thing like this

因为 last-child 用于选择父元素的最后一个子元素。你可以像这样实现同样的事情

<ul>
    <li class="complete" id="one">1</li>
    <li class="complete" id="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>


li.complete#one{background-color:yellow;} 

li.complete#two{background-color:red;} 

give id to your list and then give the style or anything as you want

为您的列表提供 id，然后根据需要提供样式或任何内容