是否可以使用CSS内容和计数器将自定义标签添加到网格中？

Question

我目前正在用div创建一个html网格，以显示字符属性。

​

​

这是设计资料中心：

<div class="grid attributes ng-scope">
    <!-- ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-0 mental grid">
        <h5 class="category-header ng-binding">mental</h5>
        <!-- ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-0 col-0-0 Intelligence attribute">
            Intelligence: 1
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-1 col-0-1 Resolve attribute">
            Resolve: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-2 col-0-2 Wits attribute">
            Wits: 0
        </div><!-- end ngRepeat: (key, value) in  attribute -->
    </div><!-- end ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-1 physical grid">
        <h5 class="category-header ng-binding">physical</h5>
        <!-- ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-0 col-1-0 Dexterity attribute">
            Dexterity: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-1 col-1-1 Stamina attribute">
            Stamina: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-2 col-1-2 Strength attribute">
            Strength: 0
        </div><!-- end ngRepeat: (key, value) in  attribute -->
    </div><!-- end ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex = $index" class="col-2 social grid">
        <h5 class="category-header ng-binding">social</h5>
        <!-- ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-0 col-2-0 Composure attribute">
            Composure: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-1 col-2-1 Manipulation attribute">
            Manipulation: 0
        </div><!-- end ngRepeat: (key, value) in  attribute --><div ng-repeat="(key, value) in  attribute" class="row-2 col-2-2 Presence attribute">
            Presence: 0
        </div><!-- end ngRepeat: (key, value) in  attribute -->
    </div><!-- end ngRepeat: (category, attribute) in mages[0].attributes -->
</div>

是否可以使用CSS content欺骗来标记行？

类似于(下面的CSS伪代码)：

body{
    counter-reset: attr;
}


.attributes> [class*='col-0-']:before {

  content: label(attr);
}

哪里的标签是把我的标签放在一个有序的列表中？或者这是SASS/SCSS类型的工作？

Answer 1

CSS计数器只能使用counter()和counters()函数。它们是完全在CSS中增量和跟踪的数值，只能表示为数值。

content属性可以通过attr()函数从原始HTML元素获取属性值，而不必使用计数器。

但是，如果您想要的值来自其他地方，例如JavaScript对象，那么除非您可以用自定义数据属性表示它们，否则需要JavaScript将它们呈现到页面中。

自定义数据属性的工作方式如下：

​

[data-foo]:before {
    content: attr(data-foo);
}

<div data-foo="Power">
    ...
</div>

​