css - 选择每组 sibling 中的最后一个 sibling

Question

所以我想选择一组元素中的最后一个兄弟元素，但是父容器中有多个元素。

<div class="wrapper">

  <div class="select"></div><!-- padding-top -->
  <div class="select"></div>
  <div class="select"></div><!-- padding-bottom -->

  <p>Some text</p>

  <div class="select"></div><!-- padding-top -->
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div>
  <div class="select"></div><!-- padding-bottom -->

<div>

所以在这种情况下，对于每一 block .select 元素，我需要将 padding-top 添加到第一个元素和 padding-bottom到最后一个。棘手的部分是 .select 元素的簇可以无限大/小，但第一个和最后一个元素需要填充。

此示例适用于顶部填充...

// add padding-top to all elements
.select {
  padding-top: 1em;
}

// remove it for general direct siblings
.select + .select {
  padding-top: 0;
}

// this will only add to the last .select in the parent container, 
// not the last in each clump of .select elements
.select + .select:last-of-type {
  padding-bottom: 1em;
}

但是我遇到问题的是 block 中最后一个元素的底部填充。

我无法添加包装器元素，因为这是伪生成的代码。 JS 也会使它成为一个相当简单的解决方案，但我宁愿先用尽我所有的纯 CSS 解决方案。

编辑:HTML 结构是 100% 任意的，因为它将由用户以所见即所得的方式生成。但是，会有一些 .select 元素的部分彼此相邻。

Answer 1

.wrapper>*:not(.select) + .select, .wrapper>.select + *:not(.select) {
    margin-top: 1em;
}
.wrapper>.select:last-child {
    margin-bottom: 1em;
}

如果定位不是问题，并且在下一个元素上设置 margin-top 不会这样做(例如，您在 .select 上有背景并且你实际上需要在组中的最后一个元素上填充底部)，好吧......你不能用 CSS 选择前一个兄弟。

所以这是一个使用 jQuery 的解决方案:

$('.wrapper>*:not(.select)').each(function() {
  $(this).prev(".select").css({
    'padding-bottom': '20px'
  })
})

body {
  margin: 0;
}
.wrapper {
  padding: 20px;
}
.select {
  background-color: #eee;
  border-bottom: 1px solid white;
}
/* ignore CSS above, it's for coloring and padding so you see elements */

.select {
  padding-top: 20px;
}
.select ~ .select {
  padding-top: 0;
}
*:not(.select) + .select {
  padding-top: 20px;
}
.wrapper>.select:last-child {
  padding-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="select">select</div>
  <!-- padding-top -->
  <div class="select">select</div>
  <div class="select">select</div>
  <!-- padding-bottom -->

  <p>Some text</p>

  <div class="select">select</div>
  <!-- padding-top -->
  <div class="select">select</div>
  <div class="select">select</div>
  <div class="select">select</div>
  <div class="select">select</div>
  <!-- padding-bottom -->

</div>