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

Question

问题在于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>

Answer 1

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.

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>

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

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

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

It would have worked if (and only if) the last li in your markup also had 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.

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.

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 :)

Answer 2

:如果元素不是非常复杂的元素,则last-child将无法工作

除了Harry的回答之外,我认为添加/强调这一点至关重要:如果元素不是容器中非常复杂的元素,则last-child将无法工作.无论出于何种原因,我花了几个小时才意识到这一点,尽管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元素不是其父元素中的最后一个元素.

这可能是显而易见的,但它不适合我......

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

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