如何仅通过HTML和CSS文件清理CSS中的覆盖样式并保留最终值？

方法一：使用PostCSS插件自动去重 #

PostCSS是一款轻量CSS处理工具，配合postcss-discard-duplicates插件可自动移除重复的CSS规则，保留最后出现的生效属性。

步骤：

1. 初始化npm项目（未初始化时执行）：

npm init -y

2. 安装依赖包：

npm install postcss postcss-cli postcss-discard-duplicates --save-dev

3. 创建postcss.config.js配置文件：

module.exports = {
  plugins: [
    require('postcss-discard-duplicates')
  ]
}

4. 执行命令处理CSS：

npx postcss 原始CSS文件名.css -o 输出文件名.css

方法二：用Node.js脚本自定义处理 #

如果需要更灵活的控制逻辑，可以编写简单脚本解析CSS，手动合并重复选择器的属性。

步骤：

1. 初始化npm项目并安装CSS解析库：

npm init -y
npm install css --save-dev

2. 创建clean-css.js脚本文件：

const fs = require('fs');
const css = require('css');

// 读取原始CSS文件
const rawCss = fs.readFileSync('input.css', 'utf8');
const parsed = css.parse(rawCss);
const selectorMap = new Map();

// 遍历规则，合并重复选择器的属性（后定义覆盖前定义）
parsed.stylesheet.rules.forEach(rule => {
  if (rule.type !== 'rule') return;
  const selectorKey = rule.selectors.join(', ');
  
  if (selectorMap.has(selectorKey)) {
    const existingDecls = selectorMap.get(selectorKey);
    const declObj = {};
    existingDecls.forEach(decl => declObj[decl.property] = decl);
    rule.declarations.forEach(decl => declObj[decl.property] = decl);
    selectorMap.set(selectorKey, Object.values(declObj));
  } else {
    selectorMap.set(selectorKey, rule.declarations);
  }
});

// 重新构建CSS规则并写入文件
parsed.stylesheet.rules = Array.from(selectorMap.entries()).map(([selectors, decls]) => ({
  type: 'rule',
  selectors: selectors.split(', '),
  declarations: decls
}));

fs.writeFileSync('output.css', css.stringify(parsed));
console.log('CSS处理完成，已生成output.css');

3. 运行脚本：

node clean-css.js

方法三：使用Clean CSS命令行工具 #

Clean CSS是成熟的CSS压缩优化工具，默认会合并重复规则并保留最后生效的属性。

步骤：

1. 安装工具：

npm install clean-css-cli --save-dev

2. 执行优化命令：

cleancss 原始CSS文件名.css -o 输出文件名.css

补充：GUI工具选项 #

若不想使用命令行，可选择Prepros这类桌面GUI工具，导入CSS文件后启用「优化CSS」功能，同样能自动合并重复规则。

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