使用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将具有a 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>';
}