Question

问题在于CSS和HTML。这是带有示例代码的link to 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元素？

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>

Answer 1

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'，它就会有效。

在comments中解决您的问题：

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

有关选择器如何工作的更多详细信息，请参阅this主题中BoltClock发布的答案。这是非常全面的：）

Answer 2

：如果元素不是非常复杂的元素

，则last-child将无效

除了Harry的回答之外，我认为添加/强调这一点至关重要：如果元素不是容器中非常复杂的元素，则last-child将无法工作。无论出于何种原因，我花了几个小时才意识到这一点，尽管Harry的答案非常彻底，但我无法从＆＃34中提取该信息;最后一个子选择器用于选择父母的最后一个子元素。＆＃34;

假设这是我的选择器：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元素不是其父元素中的最后一个元素。

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

Answer 3

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

对我来说很奇怪，因为第n个倒数第二个孩子应该是最后一个倒数第二个孩子，但是它可以工作，并且我得到了我期望的结果。我从CSS Trick

发现了这个有用的技巧

Answer 4

由于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;}

将id添加到您的列表中，然后根据需要提供样式或任何内容

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

4 个答案:

：如果元素不是非常复杂的元素