聪明地通过CSS分组类似的项目

时间:2014-11-12 12:55:43

标签: html css html5 css3

我一直试图通过cs以自动和聪明的方式对项目进行分组。 这是第一个演示内容:

http://cssdeck.com/labs/ppqszxgb

我为每个div创建了一个自定义属性。 这些自定义属性未预先定义,它们会在页面创建过程中填充。

创建后,我会读取该属性并将其与:before css选择器一起使用以设置"标题"对于每个元素,如下:

div:before{
  content: attr(att);
  font-size: 12px;
  display: block;
}

但是,我不想为每个项目提供标题。我只想将伪元素用于每个组的第一项;最好是接近这个:

http://cssdeck.com/labs/pxugtput

仅使用css可以实现吗?不是,什么是最好的选择?

1 个答案:

答案 0 :(得分:0)

它并不漂亮,但它会完成工作。我根据他们的组将所有元素设置为无序列表项。然后将li:first-child:before设置为您设置的内容。

以下是我写的代码:http://cssdeck.com/labs/hhvmvhyg

不知道这是否是您正在寻求的解决方案。