如何为除最后一个孩子之外的所有孩子设置CSS Select？

Question

我有这个CSS：

.btn-group > .btn {
    margin-right: 0; // << I want this for all except last child
    position: relative;
    border-radius: 0;
}

除了最后一个孩子之外，有没有办法可以让所有.btn的这个边距合适？

Answer 1

您可以使用:not() 否定 CSS伪类

.btn-group > .btn:not(:last-of-type) {
    color: green;
}

<div class="btn-group">
  <div class="btn">Button</div>
  <div class="btn">Button</div>
  <div class="btn">Button</div>
</div>

Answer 2

试试吧

.btn-group > .btn:not(:last-child) {
    margin-right: 0; 
    position: relative;
    border-radius: 0;
}

Answer 3

使用：not（）选择器

.btn-group > .btn:not(#someid) {
    margin-right: 0;
    position: relative;
    border-radius: 0;
}

然后将id="someid"分配给最里面的孩子

并创建一个新的CSS

.btn#someid {
    position: relative;
    border-radius: 0;
}

为最后一个孩子