我可以使用 CSS 内容和计数器向我的网格添加自定义标签吗? [英] Can I use CSS content and counters to add custom labels to my grid?

问题描述

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

这是 DIV:

<!-- ngRepeat: (category, attribute) in mages[0].attributes --><div ng-repeat="(category, attribute) in mages[0].attributes" ng-init="categoryIndex= $index" class="col-0 心理网格"><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">智力:1</div><!-- end ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-1 col-0-1 解析属性">解决:0</div><!-- end ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-2 col-0-2 智慧属性">智慧: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 物理网格"><h5 class="category-header ng-binding">物理</h5><!-- ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-0 col-1-0 Dexterity attribute">灵巧:0</div><!-- end ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-1 col-1-1 耐力属性">耐力:0</div><!-- end ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-2 col-1-2 力量属性">强度: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 社交网格"><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">沉着:0</div><!-- end ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-1 col-2-1 操作属性">操纵:0</div><!-- end ngRepeat: (key, value) in attribute --><div ng-repeat="(key, value) in attribute" class="row-2 col-2-2 存在属性">存在:0</div><!-- end ngRepeat: (key, value) in attribute --></div><!-- end ngRepeat: (category, attribute) in mages[0].attributes -->

是否可以使用 CSS content 诡计来标记行?

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

body{计数器重置:attr；}.属性>[class*='col-0-']:before {内容:标签(属性)；}

标签在哪里可以将我的标签保存在有序列表/字典中?或者这是 SASS/SCSS 类型的工作?

解决方案

CSS 计数器只能与 counter() 和 counters() 函数一起使用.它们是完全在 CSS 中递增和跟踪的数值，并且只能呈现为数值.

content 属性可以通过 attr() 函数从原始 HTML 元素中获取属性值，而无需使用计数器.

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

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

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

...

I'm currently creating a html grid out of divs to display a characters attributes.

Here is the 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>

Is it possible to label the rows using CSS content chicanery?

Something like (CSS pseudocode below):

body{
    counter-reset: attr;
}


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

  content: label(attr);
}

Where label is something that holds my labels in an ordered list/dict? Or is this a job for SASS/SCSS type stuff?

解决方案

CSS counters can only work with the counter() and counters() functions. They are numeric values that are incremented and tracked entirely within CSS, and can only be rendered as numeric values.

The content property can take an attribute value from the originating HTML element via the attr() function without having to use counters.

But if your desired values are coming from elsewhere, such as a JavaScript object, then unless you can express them in custom data attributes, you will need JavaScript to render them into the page.

Custom data attributes would work like so:

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

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

这篇关于我可以使用 CSS 内容和计数器向我的网格添加自定义标签吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！