CSS 选择器：Last-child 不起作用答案

【问题标题】：CSS Selector: Last-child not workingCSS 选择器：Last-child 不起作用
【发布时间】：2016-06-23 12:24:24
【问题描述】：

在以下示例中，第一个子选择器有效，最后一个子选择器无效。请参阅随附的屏幕截图。

问题：我的班级“gotit”将条形涂成绿色，班级“go4”将其涂成灰色。最后一个gotit应该是红色的。听起来很简单吧？

所以现在深入研究：如果我尝试选择第一个孩子，它就像一个魅力：

如果我尝试选择最后一个孩子，它什么也不做。

这里有人提示有什么问题吗？提前谢谢！

【问题讨论】：

你能给我们一些代码吗，以及jsfiddle.net上的演示:-)
您的 HTML 无效。跨度内不能有段落。
你想要类.gotit的最后一个元素而不是最后一个子元素
请在帖子中证明您的所有相关标记，而不仅仅是屏幕截图。目前我们无法确定.progress 的最后一个孩子是什么。我猜还有其他事情尚未共享（额外的标记，额外的 CSS）。你所拥有的一个非常基本的工作示例是here，.gotit 必须是.parent 的最后一个孩子才能工作。如果不是，this will happen.
几乎可以肯定重复 - stackoverflow.com/questions/5545649/…

标签： html css css-selectors

【解决方案1】：

确保.gotit 实际上是.parent 的最后一个孩子。如下所示。

.inner {
  min-width: 50px;
  min-height: 20px;
  background-color: gray;
  float: left;
  margin: 2px;
}
.inner:last-child {
  background-color: red;
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

如果不是，则将:last-child 与.gotit 一起使用将不起作用。见下文。

.inner,
.inner-other {
  min-width: 50px;
  min-height: 20px;
  background-color: gray;
  float: left;
  margin: 2px;
}
.inner:last-child {
  background-color: red;
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner-other"></div>
  <div class="inner-other"></div>
  <div class="inner-other"></div>
</div>

我猜你的标记看起来像上面的标记。尝试重新组合您的元素以帮助确保:last-child 或:last-of-type 能够正常工作。如下所示。

.inner div,
.inner-other div {
  min-width: 50px;
  min-height: 20px;
  background-color: gray;
  float: left;
  margin: 2px;
}
.inner div:last-child {
  background-color: red;
}

<div class="outer">
  <div class="inner">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="inner-other">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

【讨论】：