Css ：lastchild 没有按预期工作

发布于09月25日

问题存在于此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 element with the "complete" class为目标吗？

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-child Select 器用于 Select 父元素的最后一个子元素.它不能用于 Select 给定父元素下具有特定类的最后一个子元素.

复合 Select 器的另一部分(附加在:last-child之前)指定最后一个子元素必须满足的额外条件才能 Select 它.在下面的代码片段中，您将看到所选元素根据复合 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>

为了回答您的问题，下面将最后一个child li元素的背景色设置为红色.

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

但是下面的 Select 器不适用于标记，因为last-child没有class='complete'，即使它是li.

li.complete:last-child{
    background-color: green;
}

如果(且仅当)标记中的最后li个也有class='complete'个，它就会起作用.

要解决comments个问题中的问题，请执行以下操作:

@Harry我发现相当奇怪的是:.Complete:最后一种类型不起作用，但.Complete:第一种类型确实起作用，不管它的位置是什么，它的Parents元素.谢谢你的帮助.

Select 器.complete:first-of-type在小提琴中工作，因为它(即带有class='complete'的元素)仍然是父元素中类型li的第一个元素.try 将<li>0</li>作为ul下的第一个元素，你会发现first-of-type也会失败.这是因为first-of-type和last-of-type Select 器 Select 父项下每种类型的第一个/最后一个元素.

有关 Select 器如何工作的更多详细信息，请参阅BoltClock在this线程中发布的答案.这就是它所能得到的最全面的信息:)

Css ：lastchild 没有按预期工作

推荐答案

Css相关问答推荐

视频嵌入在Bootstrap 5轮播中没有响应扩展

Javascript Splitter Divider hover color css

用两步函数内插的css动画值

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

圆形按钮边框长度动画

如何将 div 和 img 包装在 display：flex 容器中

Prettier/VS Code 在 CSS 中的！important 之前添加一个空格，导致它在 WordPress 中崩溃

CSS 中的：not(style) ~ ：not(style) 是什么？

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值？

更改 20 个实例中的一个组件的样式

网格在行方向上的大小不正确

如何在 flex-wrap 中优先考虑第一行？

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

为什么不能将特定于供应商的伪元素/类组合成一个规则集？

弹性盒项目之间的间距

Bootstrap 4 img-circle 类似乎不存在

使用边距：0 自动；在 Internet Explorer 8 中

CSS：在图像周围创建白光

React - 防止父子事件触发

脉动的心脏 CSS 动画