如何在CSS类声明中获取HTML子元素序号并实现属性按倍数计算

可以实现你要的效果，但你举例的写法原生CSS并不支持，有两种常用的落地方式：

方案1：CSS变量配合内联传值（适配任意数量子元素，无需预处理器） #

你可以在子元素的内联样式中传入当前的序号作为自定义CSS变量，CSS侧直接用calc计算宽度即可：
HTML代码修改如下：

<div class="parent">
  <span class="child" style="--index: 1">Hi</span>
  <span class="child" style="--index: 2">Hello</span>
  <span class="child" style="--index: 3">How are you?</span>
</div>

对应的CSS代码：

div.parent > span.child {
  width: calc(var(--index) * 100px);
}

后续如果新增子元素，只需要给新的子元素加上对应的--index值即可，不需要修改CSS规则。

方案2：使用CSS预处理器循环生成规则（不需要修改HTML结构） #

如果你用Sass/Scss这类预处理器，可以直接写循环生成对应的选择器，不用手动重复编写：
Scss代码示例：

// 3是子元素的总数量，可以按需调整
@for $i from 1 through 3 {
  div.parent > span.child:nth-child(#{$i}) {
    width: #{$i * 100}px;
  }
}

编译后会自动生成对应3个子元素的宽度规则，和手动编写三条独立CSS的效果完全一致。

注：原生CSS中:nth-child()里的参数n仅用于元素匹配，无法作为变量提取到属性计算逻辑中，因此你举例的直接在属性中用n计算的写法目前无法在原生CSS中实现。

内容的提问来源于stack exchange，提问作者Itzdsp