CSS not：last-child 或 last-child 未按预期选择 [重复]

Question

在this question 之后，我正在尝试定位突出显示的 div（或者更确切地说，它的所有兄弟姐妹除外）。

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

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

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

感谢@RyanWheale，查看此代码 (https://jsfiddle.net/j0gzs8ky/1/)

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

Answer 2

你少了一个冒号

:last-child

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