小编典典

:最后一个子元素不能按预期工作?

html

问题出在此CSS和HTML之内。

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都不应该 以“ complete”类 为目标的 最后一个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>

阅读 287

收藏
2020-05-10

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


要在评论中解决您的查询:

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

2020-05-10