Question

我想在Twitter Bootstrap中使用的每一行都有一个保证金，除非它是:last-of-type/:last-child，但如果它是:only-child，我仍然想要保证金。有什么想法吗？

修改

使用给出的答案，我做了以下SASS：

.container .row {
  margin-bottom: 15px;

  &:last-child:not(:only-child) {
    margin-bottom: 0;
  }
}

Answer 1

首先请注意，:last-of-type/:last-child等CSS伪类会查看父级的子树以匹配所需的子元素，而不是通过类列表。因此，.row:last-of-type可能与最后一行匹配也可能不匹配。

但是，如果.row被.container等特定包装器嵌套，则以下内容应该有效：

<强> Example Here

.container > :last-child:not(:only-child)

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

Answer 2

这是一个jQuery解决方案

var rowsNum = $('.your-rows').length;

if (rowsNum > 1) {
    $('.your-rows').not(':last-child').css({'margin':'your margin'});
} else {
    $('.your-rows').css({'margin':'your margin'});
}

Answer 3

我想到的第一件事就是只有当有两个以上的孩子时才选择行。

仅从第二行开始选择最后一行：

.row:nth-child(n+2):last-child

实施例

＆＃13;

.container {
  margin-bottom: 50px;
}
.container > .row:nth-child(n+2):last-child {
  background: #F00;
}

＆＃13;

<div class="container">
  <div class="row">No color for only row</div>
</div>
<div class="container">
  <div class="row">Color</div>
  <div class="row">Color</div>
  <div class="row">Color</div>
  <div class="row">Color</div>
</div>

＆＃13;

从最后一个类型中移除边距，但如果只是子节点则不移除

3 个答案:

实施例