Question

我正尝试使用以下样式块为表单的最后一个直接子项添加底部边框：

但表单中的所有子项似乎都匹配:last-child选择器。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

可能需要注意的是，此表单是使用react-form-for-object library动态生成的。

Answer 1

试试这个：）

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

Answer 2

如果您只想选择直接子女，可以使用.EnableTokenEndpoint("/connect/{slug}/token");：

parent > child

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

CSS - 父级中的所有元素都匹配最后一个子选择器。如何为表单中包含的所有元素添加样式，但最后一个？

2 个答案: