CSS -父级匹配中的所有元素都是最后一个子选择器。如何将样式添加到表单中包含的所有元素(除了最后一个元素)？

Question

通过使用以下样式块，我试图在窗体的最后一个直接子元素之外的所有窗体中添加底部边框：

但是表单的所有子元素似乎都与:last-child选择器匹配。

这是我的代码：

​

 .form-for:not(:last-child) > div {
        border-bottom: 1px solid #6d6e71;
    }

<form class="form-for">
        <div>
            <div class="form-group">
                <label class="form-for-label">Name</label>
                <input type="text" name="Name" value="" placeholder="Name">
            </div>
        </div>
        <div>
            <div class="form-group">
                <label class="form-for-label">Description</label>
                <input type="text" name="Description" value="" placeholder="Description">
            </div>
        </div>
        <div>
            <div class="form-group">
                <label class="form-for-label">Creation Date</label>
                <input type="text" name="Creation Date" value="" placeholder="Creation Date">
            </div>
        </div>
    </form>

​

需要注意的是，这个表单是使用react form-for-object库动态生成的。

Answer 1

如果您只想选择直接子级，则可以使用parent > child

​

.form-for>div:not(:last-of-type)>div {
  border-bottom: 1px solid #6d6e71;
}

<form class="form-for">
  <div>
    <div class="form-group">
      <label class="form-for-label">Name</label>
      <input type="text" name="Name" value="" placeholder="Name">
    </div>
  </div>
  <div>
    <div class="form-group">
      <label class="form-for-label">Description</label>
      <input type="text" name="Description" value="" placeholder="Description">
    </div>
  </div>
  <div>
    <div class="form-group">
      <label class="form-for-label">Creation Date</label>
      <input type="text" name="Creation Date" value="" placeholder="Creation Date">
    </div>
  </div>
  <input type="submit" />
</form>

​

Answer 2

(试试看:)

.form-for > div:not(:last-child) {
    border-bottom: 1px solid #6d6e71;
}

另一种解决办法(可选)

.form-for > div {
    border-bottom: 1px solid #6d6e71;
}
.form-for > div:last-child {
    border-bottom: 0px solid #fff;
}