如何在多CSS文件中为body重置多计数器且仅修改第二个文件

问题背景 #

我有两个独立的CSS文件，需要给body重置两个计数器，但后引入的文件规则会覆盖先引入的：

• 第一个文件（不可修改）：

body {
    counter-reset: counter-one;
}

• 第二个文件（仅可修改此文件）：

body {
    counter-reset: counter-two; /* 这条会覆盖上面的规则，导致counter-one失效 */
}

要求：

1. 不能修改第一个文件
2. 支持后续添加更多文件和计数器
3. 允许使用仅操作document的JS

试过用CSS自定义属性的方案，但需要改第一个文件，不符合要求；也考虑过用容器元素包裹body内容，太麻烦。

可行方案 #

方案一：JS动态合并计数器规则 #

在第二个文件里加一段JS，读取body已有的counter-reset值，把新计数器追加进去再重新设置。后续新增文件也可以用同样逻辑扩展。

修改后的第二个文件内容：

/* 先声明新计数器，后续由JS合并 */
body {
    counter-reset: counter-two;
}

document.addEventListener('DOMContentLoaded', () => {
    const body = document.body;
    const computedStyle = getComputedStyle(body);
    // 获取已生效的计数器重置规则
    const existingCounters = computedStyle.getPropertyValue('counter-reset').trim();
    // 当前要添加的计数器（如果后续文件要加新的，替换成对应名称即可）
    const newCounter = 'counter-two';
    
    // 合并已有和新计数器
    const combinedReset = existingCounters ? `${existingCounters} ${newCounter}` : newCounter;
    // 应用合并后的规则
    body.style.counterReset = combinedReset;
});

方案二：纯CSS伪元素方案 #

不需要JS，利用body的伪元素来承载额外的计数器重置——伪元素的计数器重置不会覆盖主元素的，且作用域能覆盖整个页面。

修改后的第二个文件内容：

body::before {
    content: ''; /* 必须设置content才会生效 */
    counter-reset: counter-two;
}

如果后续还要加更多计数器，比如第三个文件要加counter-three，直接在对应文件里写：

body::after {
    content: '';
    counter-reset: counter-three;
}

或者在同一个伪元素里追加：

body::before {
    content: '';
    counter-reset: counter-two counter-three;
}

注意：伪元素不要设置任何布局相关样式（比如宽高、margin、padding），避免影响页面。

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