仅使用css，使用元素在DOM层次结构中的类名出现顺序为其设置样式

Question

我想知道是否有可能，仅使用css，在同一类名内使用元素属性在DOM中的呈现顺序来设置元素属性的值。

让问题更清楚的例子：

假设我有一个名为demo的类，并且我愿意呈现两个以demo为类的元素：

<div id="first" class="demo"></div>
<div id="second" class="demo"></div>

现在，在我的.css文件中定义了demo：

.demo{
font-size: 10px
}

我想实现的是id为first的div将具有10px的font-size，id为second的div将具有20px的font-size。并且随后以相同类名demo动态呈现的每一个其它div将具有calc(10*appearnceNumber)+'px'的font-size。(id=firstdiv是类demo的第一个元素，因此appearnceNumber将是1，而font-size将是10px(。

Answer 1

如果数量有限，您可以近似如下：

:root {
--base:10px;
}
.demo {
font-size:var(--base);
}
.demo ~ .demo {
font-size:calc(2*var(--base));
}
.demo ~ .demo ~ .demo {
font-size:calc(3*var(--base));
}
.demo ~ .demo ~ .demo ~ .demo{
font-size:calc(4*var(--base));
}
.demo ~ .demo ~ .demo ~ .demo ~ .demo{
font-size:calc(5*var(--base));
}
.demo ~ .demo ~ .demo ~ .demo ~ .demo ~ .demo{
font-size:calc(6*var(--base));
}
.demo ~ .demo ~ .demo ~ .demo ~ .demo ~ .demo ~ .demo{
font-size:calc(7*var(--base));
}

<div class="demo">text</div>
<div class="demo">text</div>
<div class="demo">text</div>
<div class="demo">text</div>
<div class="demo">text</div>
<div class="demo">text</div>
<div class="demo">text</div>