CSS not：最后一个或最后一个孩子未按预期选择

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