Question

我尝试通过在属性序列中的每个中断之上生成标题来可视化地对元素列表进行分组。当团体名称提前知道时，我已经能够完成它。但是，如果我想支持未知的各种群体呢？当实际属性值是变量时，是否可以确定匹配？

这是它当前如何使用预定义的属性值。它不是很容易扩展。

CSS

.item:first-child:before,
.item:not([data-group="First Group"]) + .item[data-group="First Group"]:before,
.item:not([data-group="Second Group"]) + .item[data-group="Second Group"]:before,
.item:not([data-group="Third Group"]) + .item[data-group="Third Group"]:before {
    content: attr(data-group);
    display: block;
    font-weight: bold;
}

HTML

<div class="item" data-group="First Group">one</div>
<div class="item" data-group="First Group">two</div>
<div class="item" data-group="First Group">three</div>
<div class="item" data-group="Second Group">four</div>
<div class="item" data-group="Second Group">five</div>
<div class="item" data-group="Second Group">six</div>
<div class="item" data-group="Third Group">seven</div>
<div class="item" data-group="Third Group">eight</div>
<div class="item" data-group="Third Group">nine</div>

RENDERS

第一组

一个

2

3

第二组

4

5

6

第三组

7

8

9

使用CSS以任意属性分组元素列表

0 个答案: