[英]CSS - All elements in parent match last-child selector. How can I add styling to all the elements contained in a form but the last one?
I am trying to add a bottom border to all but the last direct children of a form by using the following styling block: 我正在尝试通过使用以下样式块为表单的最后一个直接子代添加底部边框:
But all the children of the form seem to match the :last-child
selector. 但是所有形式
:last-child
元素似乎都与:last-child
选择器匹配。
Here is my code: 这是我的代码:
.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>
It might be important to mention that this form is dynamically generated using the react-form-for-object library . 可能需要提及的是,此表单是使用react-form-for-object库动态生成的。
try this :) 尝试这个 :)
.form-for > div:not(:last-child) {
border-bottom: 1px solid #6d6e71;
}
another solution (optional) 另一个解决方案(可选)
.form-for > div {
border-bottom: 1px solid #6d6e71;
}
.form-for > div:last-child {
border-bottom: 0px solid #fff;
}
If you only want to select direct children you can use parent > child
: 如果只想选择直系子女,则可以使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.