CSS not：最后一个子项或最后一个子项未按预期选择[重复]

Question

另一个问题是关于“每个匹配的第 n 个孩子和一个任意选择器”，但我不会这样做。我只需要使用特定的选择器来定位最后一个子元素。

因此，在这个问题之后，我试图定位突出显示的div（或者更确切地说，除了它自己之外的所有兄弟姐妹）。

div.card-body > div.form-group:not(last-child) {
    margin-bottom: 0;
}

我尝试过各种CSS，但无法弄清楚这一点。基本上我想删除除最后一个之外的所有表单组的边距。

请注意，它不是“card-body”的最后一个 div 子级。我试图定位具有“form-group”类的最后一个 div，而不是最后一个 div。

查看此代码（https://jsfiddle.net/j0gzs8ky/1/）感谢@RyanWheale

CSS

div.card-body > .form-group:not(:last-child) {
  background-color: #fcc;
}

HTML

<div class="card-body">
  <div class="form-group">
  ONE
  </div>
  <div class="form-group">
  TWO
  </div>
  <div class="form-group">
  THREE - target me
  </div>
  <div>
    I am the last div
  </div>
</div>

这正在改变《三人行》的背景，但我不希望这样。所以我试图只针对三个 - 并且由于三个之前和之后可能有不同数量的 div，所以我也不能使用第 n 个子元素。

那么如何定位具有“form-group”类的最后一个子div

更新 - 解决方案

由于这是一个重复的问题，而我想要做的事情是不可能的，因此这是解决方法。

由于无法再添加答案，希望在此处添加此内容将帮助可能面临此问题的其他人：

我添加了一个额外的 div 来包含表单组，然后我可以定位最后一个子项：

HTML

<div class="card-body">
  <div class="form-groups-container"
    <div class="form-group">
    ONE
    </div>
    <div class="form-group">
    TWO
    </div>
    <div class="form-group">
    THREE - target me
    </div>
  </div>
  <div>
    I am the last div
  </div>
</div>

CSS

.form-groups-container > .form-group:not(:last-child) {
  margin-bottom: 0;
}

Answer 1

你少了一个冒号

:last-child

div.card-body > div.form-group:not(:last-child) {
    margin-bottom: 0;
}

Answer 2

您缺少选择器最后一个子项的冒号

div.form-group:not(:last-child) {
  border: 1px solid red;
}

<div class="card-body">
  <div class="form-group">First</div>
  <div class="form-group">2</div>
  <div class="form-group">3</div>
  <div class="form-group">4</div>
  <div class="form-group">5</div>
  <div class="form-group">6</div>
  <div class="form-group">7</div>
  <div class="form-group">8</div>
  <div class="form-group">9</div>
  <div class="form-group">Last</div>
</div>