:last-child 没有按预期工作? [英] :last-child not working as expected?

问题描述

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

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

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 元素为目标吗?

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

jQuery 中的这个查询也不针对它:

This query in jQuery doesn't target it either:

$("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 选择器用于选择父元素的最后一个子元素.它不能用于选择给定父元素下具有特定类的最后一个子元素.

The last-child selector 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.

.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 元素的背景颜色设置为红色.

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

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

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

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

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

如果(且仅当)标记中的最后一个 li 也有 class='complete' 时，它才会起作用.

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

在评论中解决您的问题:

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

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

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

The selector .complete:first-of-type works in the fiddle because it (that is, the element with class='complete') is still the first element of type li within the parent. Try to add <li>0</li> as the first element under the ul and you will find that first-of-type also flops. This is because the first-of-type and last-of-type selectors select the first/last element of each type under the parent.

参考 BoltClock 在 这个 线程以获取有关选择器如何工作的更多详细信息.这是最全面的:)

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

这篇关于:last-child 没有按预期工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！