html - 我可以使用 CSS 内容和计数器向我的网格添加自定义标签吗？

Question

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

这是 DIV:

<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);
}

label 在哪里可以将我的标签保存在有序列表/字典中？或者这是 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>