CSS选择器:最后一个孩子不工作 [英] CSS Selector: Last-child not working

问题描述

在下面的示例中，第一个子选择器起作用，最后一个子选择器不起作用.请查看所附的屏幕截图.

In the following example the first-child selector works, the last-child doesn't. Please see attached screenshots.

问题:我的班级被遗忘"将条形显示为绿色，则类别为"go4".颜色为灰色.最后得到的应该是红色的.听起来很简单，对吧?

The Problem: My class "gotit" colors the bar green, the class "go4" colors it grey. The last gotit should be red. Sounds simple, huh?

因此，请深入了解:如果我尝试选择第一个孩子，它的工作原理就像是一种魅力:

So now dig in: If I try to select the first-child, it works like a charm:

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

If I try to select the last-child, it just does nothing.

这里有人暗示出什么事了吗?预先谢谢你！

Anyone here with a hint whats wrong? Thank you in advance!

推荐答案

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

Make sure .gotit is actually the last child of .parent. Like below.

.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一起使用将不起作用.见下文.

If it isn't, using :last-child with .gotit won't work. See below.

.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 即可.像下面这样.

I'm guessing your markup looks like the above markup. Try regrouping your elements to help ensure that :last-child or :last-of-type will work. Something like below.

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

这篇关于CSS选择器:最后一个孩子不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！