如何仅通过CSS动态修改CSS变量值？该操作是否可行？

原生CSS没有提供直接将计数器实时值同步给CSS变量的语法：counter() 函数仅能在content属性中生效，无法作为数值赋值给自定义属性（CSS变量）参与其他属性的计算。
针对你当前固定步长递增的场景，有两种可直接落地的方案： #

方案1：纯CSS无JS实现（适配现代浏览器） #

直接用CSS变量配合原有计数器完成值同步，渲染效果和原有逻辑完全一致：

:root {
  --color_rgb: 50;
  /* 新增全局计数基值，初始值和原有counter-set的初始值0对应 */
  --color_step_base: 0;
}

body {
  counter-set: color 0;
}

p {
  /* 每个p元素按固定步长40累加，和原有counter-increment步长一致 */
  --color_rgb: calc(var(--color_step_base) + 40);
  /* 更新基值供下一个同级p元素使用 */
  --color_step_base: var(--color_rgb);
  padding: 20px;
  background-color: rgba(calc(var(--color_rgb)/2), var(--color_rgb), calc(var(--color_rgb)*2), 0.8);
}

p::before {
  /* 保留原有计数器逻辑，显示效果和原来完全一致 */
  counter-increment: color 40;
  content: "Section. " counter(color) " ";
}

这个方案按DOM渲染顺序，让同级元素依次传递累加的变量值，不需要任何JS介入。 #

方案2：极简JS辅助（全浏览器兼容） #

如果需要兼容老旧浏览器，不需要改动原有CSS，只需要加一段很短的JS，按顺序给每个段落设置对应值即可，取值规则和计数器完全对齐：

// 步长和counter-increment配置保持一致
const INCREMENT_STEP = 40
document.querySelectorAll('p').forEach((paragraph, idx) => {
  // 第一个p对应计数器值40，第二个80，以此类推
  paragraph.style.setProperty('--color_rgb', (idx + 1) * INCREMENT_STEP)
})

踩坑提示：不要写--color_rgb: counter(color)这类代码，counter()不属于CSS数值函数，除content外的所有属性都无法识别它的返回值。

内容的提问来源于stack exchange，提问作者Nikola Savić