公共样式文件 common.scss
.zz-ant-status-bar {div {font-size: 12px;padding: 0 8px;}
}页面代码
<div class="zz-ant-status-bar"><a-row><a-col :span="6" ><a-progress :percent="progress.percent" size="small" /></a-col></a-row></div>问题：外层 "zz-ant-status-bar" 自定义样式 对 Ant Design Vue 的控件 <a-progress 渲染产生了影响，现在想以 不改动公用代码 common.scss 的情况下，以最小的改动解决 对 <a-progress 渲染样式的影响。
在【页面代码】 中添加自定义样式 "progress-col"
.progress-col div {all: revert;
}把这个 "progress-col" 样式添加在 <a-progress 外层的 <a-col 上，
<a-col :span="6" class="progress-col">
<div class="zz-ant-status-bar"><a-row><a-col :span="6" class="progress-col"><a-progress :percent="progress.percent" size="small" /></a-col></a-row></div>以下是 ai 的解释
你这样修改有效的核心原理是通过 all: revert 重置了 a-progress 内部 div 元素继承的样式，具体可以拆解为以下几点：
定位受影响的范围
你给a-progress所在的a-col添加了progress-col类，这个类作为 “隔离容器”，精准定位了需要修复样式的区域（即a-progress所在的列）。利用
all: revert重置样式
CSS 属性all: revert的作用是：将元素的所有 CSS 属性重置为其 “自然值”—— 即浏览器默认样式（或父级未被覆盖的原始样式），而不是继承当前上下文的样式。
在你的代码中，.zz-ant-status-bar对内部所有div设置了font-size: 12px; padding: 0 8px;，这会影响a-progress内部的div元素（因为a-progress组件内部通常由多个div构成，用于渲染进度条、文字等）。
而.progress-col div { all: revert; }则指定：progress-col类内部的所有div（包括a-progress组件内部的div），不再继承.zz-ant-status-bar div的样式，而是恢复为浏览器默认样式或a-progress组件本身的原始样式，从而摆脱了父级样式的干扰。优先级与作用范围的控制
由于.progress-col是a-col的类，比.zz-ant-status-bar更靠近a-progress内部的div，因此.progress-col div的样式规则优先级更高，能够覆盖.zz-ant-status-bar div的样式，确保重置生效。
简单说，你通过 progress-col 划定了需要隔离的区域，再用 all: revert 一键清除了该区域内 div 元素从父级继承的样式，让 a-progress 组件恢复了自己原本的样式，达到了 “不受 zz-ant-status-bar 影响” 的效果。这种方式比全局重置更精准，只针对目标区域生效，避免影响其他元素。
