选择每组兄弟姐妹中的最后一个兄弟姐妹

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>

因此，在这种情况下，对于每一组.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;
}

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

我无法添加包装元素，因为这是伪生成的代码。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在下一个元素上设置 a 不起作用（例如，您有背景.select，并且实际上需要组中最后一个项目的底部填充），那么...您不能使用 CSS 选择上一个同级。

所以这里有一个使用 jQuery 的解决方案：

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

$('.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;
}