CSS - 使用counter（）数字作为属性的值 [英] CSS - Use counter() number as property's value

问题描述

我想根据它的索引，使用 counter（）来增加元素的 margin-top >增量。像：

  div {
 margin-top：calc（counter（myCounter）* 10px）; 
} 
  

显然上面的方法不行，如果它以某种方式可以使用。既没有找到说明它不能做的事情，所以我想知道...

由于计数器本质上是由css指定的变量，是否有任何方式，我可以使用CSS计数器数值作为属性的值？

EDIT

重复（根据CSS中的计数器值设置边距（缩进） / a>）不提供答案，无论是否可能，以及为什么。

解决方案

它只能在 content 属性，不像变量你想的方式。如果你在DevTools等中查看它，它不是一个整数。

在CSS 2.1中，计数器的值可以只有从内容属性引用。 来源

Say I want to increment the margin-top of an element according to it's index, using a counter() increment. Something like:

div {
    margin-top: calc(counter(myCounter) * 10px);
}

Obviously the above doesn't work, but I couldn't find any info if it somehow can be used. Neither found something that stated it can't be done, so I wondered...

Since counters are essentially variables mantained by css, is there any way I can use a CSS counter number as the value of a property?

EDIT

The supposed duplicate (Set margin (indent) based on counter value in CSS) does not provide an answer whether it is or isn't possible, and why. It simply suggests another approach.

解决方案

It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.

"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source

这篇关于CSS - 使用counter（）数字作为属性的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！