html – 使用CSS组合元素

我做了一个快速的模板来解释我正在努力实现的目标：
http://codepen.io/anon/pen/XJWrjO

你可以看到,有两类元素.一个和两个

我想通过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.

或者,div8将有一个margin-top(与上一个语句相似的结果)

允许对彼此相似的类似项目进行视觉分组的任何种类的解决方案都被接受.

没有JS,只有CSS.

解决方法

由于您不能组合：last-child与.class选择器,很难将margin-bottom分配给集群的最后一个元素.但是您可以通过以下方式检测到另一个群集的切换：

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

见DEMO.

关于评论的编辑要求一般规则：
这不是一般的规则,我知道现在可以工作,因为CSS不提供任何类似的东西,也不支持对以前的选择器的类返回引用.所以你不能做任何事情

.{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,-2) . ' { margin-top: 50px; }</style>';
}

html – 使用CSS组合元素

解决方法

相关文章