：最后一个孩子没有按预期工作？
问题在于这个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的行不应该用“完整”类的最后一个元素 ？
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>
last-childselect器用于select父代的最后一个子元素。 它不能用于在给定的父元素下select具有特定类的最后一个子元素。
复合select器的其他部分（附加在:last-child ）指定了最后一个子元素必须满足的额外条件，以便它被选中。 在下面的代码片段中，您将看到所选元素的不同之处，这取决于复合select器的其余部分。
.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>
：如果元素不是VERY LAST元素，则最后一个子元素将不起作用
除了Harry的回答之外，我认为增加/强调这一点是至关重要的：如果元素不是容器中的VERY LAST元素，则最后一个子元素不起作用。 不pipe出于什么原因，我花了几个小时才意识到这一点，即使Harry的回答非常详尽，我也无法从“最后一个子select器用来select父代的最后一个子元素”中提取这些信息。
假设这是我的select器： a:last-child {}
这工作：
<div> <a></a> <a>This will be selected</a> </div>
这不：
<div> <a></a> <a>This will be no longer be selected</a> <div>This is now the last child :'( </div> </div>
这并不是因为a元素不是其父元素中的最后一个元素。
这可能是显而易见的，但它不适合我…
最后一个孩子用来select父元素的最后一个子元素。 你可以做到这样的事情
<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，然后给你的风格或任何你想要的
