：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;
}

这些行的任何一行都不应以 last 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.

复合选择器的另一部分c $ c>：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 设置为背景颜色为红色。 / p>

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

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

@哈里我发现很奇怪：.complete：last-of-type无效， .complete：first-of-type工作，不管它的位置是parent的元素。谢谢你的帮助。

@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 下的第一个元素， 第一类型也是翻牌。这是因为第一类型和最后类型选择器选择每个的第一个/最后一个元素

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屋！