all: revert对表格元素常失效，因其仅重置当前元素属性，无法穿透影响子元素；需显式批量重置table及所有子选择器，并补充border-collapse等关键声明，兼容性差时应回退至display、padding等属性手动重置。
为什么 all: revert 对表格元素经常失效
因为 all: revert 会把所有 CSS 属性（包括 display、border-collapse、vertical-align 等）重置为浏览器默认样式，但表格相关元素（<table>、<code><td>、<code><th>）的 UA 样式表中，很多规则是通过祖先选择器（如 <code>table td）或继承链设定的，而 all: revert 只作用于当前元素自身，无法“穿透”重置子元素。所以你给 <table> 加了 <code>all: revert，<td> 依然被外部 CSS 的 <code>td { padding: 10px; } 覆盖。
必须同时重置 <table> 和所有表格子元素
<p>单独对 <code><table> 使用 <code>all: revert 不够——你需要显式覆盖整个表格结构链。最稳妥的方式是用属性选择器批量命中：
table,
table tr,
table td,
table th,
table thead,
table tbody,
table tfoot {
all: revert;
}
注意这不包括 <col> 和 <colgroup></colgroup>（它们不渲染，但若外部 CSS 设置了 col { background: red; }，也建议加上）：
-
all: revert不会恢复border-collapse的 UA 值（通常是separate），而浏览器默认是collapse；所以最好额外声明border-collapse: collapse; - 某些浏览器（如 Safari 15.4+）对
all: revert在<td> 上的支持仍不稳定，可加 <code>!important强制（仅限兜底） - 如果外部 CSS 使用了高优先级选择器（如
#app table td），你的重置规则必须至少同级或更高（比如加table:not([data-no-revert]) td）
遇到 revert 不生效时的 fallback 方案
当 all: revert 因浏览器兼容性或选择器权重失败，直接回退到显式重置关键属性更可靠：
table,
table tr,
table td,
table th {
display: table;
display: table-row;
display: table-cell;
border: 0;
padding: 0;
margin: 0;
border-collapse: collapse;
vertical-align: inherit;
text-align: inherit;
}
这里要注意：
-
display值不能写错：表格行必须是table-row，单元格是table-cell，否则布局彻底崩坏 -
vertical-align设为inherit是为了不破坏父级<tr> 的对齐行为，设 <code>baseline或middle反而容易引入新偏差 - 如果项目需支持 IE，
all: revert完全不可用，只能走这套显式重置 - 确认 computed 栏中
display是table-cell，border-collapse是collapse，box-sizing是border-box（UA 默认值） - 右键 → “Reset style” 并对比变化——如果 reset 后样式变回朴素，说明你的
all: revert规则没命中目标元素
如何验证是否真正清除了外部污染
打开 DevTools，选中一个 <td>，在 Styles 面板里逐条检查：
<ul>
<li>看 <code>padding、border、background 是否显示为 “user agent stylesheet” 而非 “author stylesheet”
真正的难点不在写几行 CSS，而在识别哪些外部规则是隐式继承的、哪些是通过复合选择器强打的——往往要靠反复 inspect + 删除可疑规则来定位源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
