CSS选择器：最后一个孩子不工作

Question

在以下示例中，第一个子选择器起作用，最后一个子选择器不起作用。请参阅随附的屏幕截图。

问题：我的班级＆＃34;得到＆＃34;栏杆绿色，班级＆＃34; go4＆＃34;把它变成灰色。最后得到的应该是红色的。听起来很简单，是吗？

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

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

这里有提示的人有什么不对吗？提前谢谢！

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果不是，使用:last-child并.gotit无法正常工作。见下文。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我猜你的标记看起来像上面的标记。尝试重新组合元素，以确保:last-child或:last-of-type能够正常运行。像下面的东西。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;