Question

我制作了一个快速模板来解释我想要实现的目标： http://codepen.io/anon/pen/XJWrjO

如您所见，有两类元素。 .one和.two

我想通过css将以下元素相互分组。这将是一个视觉分组;不是结构分组。

很快，我想做的是，将margin-top提供给每个类群的第一个元素，将margin-bottom提供给每个群集的最后一个元素。

所以，根据我的例子，这里是集群：

1,2,3,4         - red cluster
5,6,7           - cyan cluster
8,9             - red cluster
10,11,12,13,14  - cyan cluster
15              - red cluster
16,17           - cyan cluster

因此，根据这种结构，div5将具有margin-top，而div7将具有margin-bottom。

或者，div5会有margin-top而div8会有margin-top（与之前的陈述类似的结果）

任何类型的解决方案都允许对相互跟随的类似分类项目进行视觉分组。

没有JS，只有CSS。

Answer 1

由于您无法将:last-child与.class选择器合并，因此很难将margin-bottom分配给群集的最后一个元素。但您可以使用+：

检测到切换到另一个群集

.one + .two, .two + .one {
    margin-top: 50px;
}

请参阅 DEMO 。

关于要求一般规则的评论的编辑：这不是一般的规则，我知道哪个可以正常工作，因为CSS不提供:nth-of-class之类的东西，也不支持对先前选择器类的后引用。所以你不能做任何像

这样的事情

.{class-variable} + :not(.{class-variable})

但是如果你有一个所有可能的类的列表，你可以做类似的事情：

.one + :not(.one), 
.two + :not(.two) {
    margin-top: 50px;
}

您需要为列表中的每个类重复此操作。查看 DEMO 2 ，它有三个不同的类。

生成输出时，您需要收集数组中的所有类，并在输出中创建一个额外的样式元素，以避免每次都调整CSS。在PHP中，这看起来像

$style = '';
foreach ($classes AS $class) {
    $style .= '.' . $class . ' + :not(.' . $class . '), ';
}
if ($style != '') {
    $output = '<style>' . substr($style, 0, -2) . ' { margin-top: 50px; }</style>';
}

Answer 2

只是为了显示替代方案，您可以通过分配data-cluster属性在标记中订购群集：

<div class="two" data-cluster="red">6</div>

然后按照您的意愿设置样式：

div[data-cluster="red"] {
  background: red;
  margin-top: 10px;
}

div[data-cluster="red"] + div[data-cluster="red"] {
  margin-top: 0; 
}

Demo

Answer 3

只是为了补充@Paul的（优秀）答案，你可以通过在所有子元素上应用上边距来反过来解决这个问题，然后在a子元素由具有相同类的子元素跟随。

像这样：

div {
  width: 100%;
  margin: 2px;
  margin-top: 50px;
}
.one + .one, .two + .two {
  margin-top: 0;
}

<强> UPDATED CODEPEN

这种方法的一个优点是:not选择器 - 旧版浏览器such as ie8不支持 - 并非必要。

这是一个有3个班级的例子

div {
  width: 100%;
  margin: 2px;
  margin-top: 50px;
} 
.one + .one, .two + .two, .three + .three {
  margin-top: 0;
}

<强> CODEPEN 2

＆＃13;

body {
  padding: 64px;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-family: Arial;
  line-height: 40px;
}
div {
  width: 100%;
  margin: 2px;
  margin-top: 50px;
}
.one + .one,
.two + .two,
.three + .three {
  margin-top: 0;
}
.one {
  background-color: tomato;
}
.two {
  background-color: aqua;
}
.three {
  background-color: maroon;
}

＆＃13;

<div class="one">1</div>
<div class="one">2</div>
<div class="three">3</div>
<div class="three">4</div>
<div class="two">5</div>
<div class="two">6</div>
<div class="two">7</div>
<div class="one">8</div>
<div class="one">9</div>
<div class="two">10</div>
<div class="two">11</div>
<div class="three">12</div>
<div class="three">13</div>
<div class="two">14</div>
<div class="one">15</div>
<div class="two">16</div>
<div class="two">17</div>

＆＃13;

Answer 4

检查它可能对你有所帮助，你取得了什么： -

Demo

div:nth-child(1){margin-top:10px;color:green}
div:nth-child(17){margin-bottom:10px;color:yellow}

Answer 5

这是你想要实现的目标吗？

检查demo。

CSS：

.one-group div:last-child{
margin-bottom:15px;}

.two-group div:last-child{
margin-bottom:15px;}

使用CSS组元素

5 个答案: