如何在不修改原有CSS文件的前提下覆盖或清除网站现有所有CSS样式？

你完全可以通过新增CSS文件一次性清除原有样式，不需要逐条覆盖 #

方案1：全局全量重置 #

如果需要调整全站样式，直接用通配选择器搭配all属性即可一键清空所有原有CSS规则：

* {
  all: unset !important;
}

• 这里的!important用于覆盖原有CSS中已经带!important标记的规则，如果你新增的CSS文件加载顺序在所有原有CSS之后，普通规则不加!important也会生效。
• 该操作会同时清除浏览器自带的默认元素样式（比如标题字号、段落边距、列表前缀等），你需要在重置规则后补写自己需要的基础样式即可。

方案2：局部范围重置 #

如果只需要调整部分页面/部分模块的样式，不需要全局改动，可以给要修改的区域加上专属类名，只重置该区域下的样式：

/* 假设要修改的区域加了custom-wrap类 */
.custom-wrap,
.custom-wrap * {
  all: unset !important;
  /* 可以直接在这里加你需要的通用基础规则 */
  box-sizing: border-box !important;
}

补充说明 #

如果仅需要修改少量零散样式，不需要全局/局部重置，直接用更高特异性的选择器或者!important覆盖对应规则即可，工作量更小。

• 前提是确保你的自定义CSS文件加载顺序在所有原有CSS文件之后，这是所有覆盖规则生效的基础。
• all属性兼容所有主流现代浏览器，不需要额外做兼容处理。

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