Question

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

children

因此，在这种情况下，对于<div class="wrapper"> <div class="select"></div> <div class="select"></div> <div class="select"></div> <p>Some text</p> <div class="select"></div> <div class="select"></div> <div class="select"></div> <div class="select"></div> <div class="select"></div> <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％任意的，因为它将由用户在WYSIWYG中生成。但是，.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>

Answer 2

结构总是由div分隔的两组p？

padding是否意味着在每个组的顶部/底部创建空间？如果是这样，margin可以改为吗？

然后这是一个样本。

.wrapper div:first-child,
.wrapper p {
    margin-top: 20px;
}
.wrapper div:last-child,
.wrapper p {
    margin-bottom: 20px;
}

/* just for coloring making it visible */
.wrapper {
  background-color: #666;
  border: 1px solid  black;
}
.wrapper p,
.select {
  background-color: #aaa;
  border: 1px solid white;
}

<div class="wrapper">

  <div class="select">1</div><!-- padding-top -->
  <div class="select">2</div>
  <div class="select">3</div><!-- padding-bottom -->

  <p>Some text</p>

  <div class="select">1</div><!-- padding-top -->
  <div class="select">2</div>
  <div class="select">3</div>
  <div class="select">4</div>
  <div class="select">5</div><!-- padding-bottom -->

<div>

如果需要padding并且您不想使用脚本，则可能会有效。

.wrapper div:first-child {
    padding-top: 20px;
}
.wrapper div:last-of-type {
    padding-bottom: 20px;
}

/* just for coloring making it visible */
.wrapper {
  border: 1px solid  black;
  background-color: #666;
}
.wrapper p,
.select {
  background-color: #aaa;
  border: 1px solid white;
}

<div class="wrapper">
  <div class="select">1</div>
  <div class="select">2</div>
  <div class="select">3</div>
  <p>Some text</p>  
</div>
<div class="wrapper">
  <div class="select">1</div>
  <div class="select">2</div>
  <div class="select">3</div>
  <div class="select">4</div>
  <div class="select">5</div>
</div>

Answer 3

我认为您不需要触摸.select元素，只需在.wrapper上添加填充顶部和底部，并在顶部和底部添加边距到p

Answer 4

我知道有个老问题，但我也遇到了同样的问题，因此认为这可能对某人有所帮助。使用：not（）对我有用；在本示例中，我使用边框代替了填充，因此更加醒目。

.wrapper * {
    margin: 0;
    padding: 0;
}
.select {
    border-top: 30px solid #f00;
}
.select:last-of-type {
    border-bottom: 30px solid #f00;
}
.select + .select {
    border-top: 0;
}
.select + :not(.select) {
    border-top: 30px solid #f00;
}

<div class="wrapper">
    
    <div class="select">Select 1</div><!-- padding-top -->
    <div class="select">Select 2</div>
    <div class="select">Select 3</div><!-- padding-bottom -->

    <p>Some text</p>

    <div class="select">Select 4</div><!-- padding-top -->
    <div class="select">Select 5</div>
    <div class="select">Select 6</div>
    <div class="select">Select 7</div>
    <div class="select">Select 8</div><!-- padding-bottom -->
    
<div>

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

4 个答案: