html - 使用 CSS 对元素进行分组

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>';
}