如何重置指定元素样式并保留HTML属性样式（规避Bootstrap覆盖）？

安全阿岳

2026-5-7

当然可以实现！

你遇到的问题是CSS优先级与样式重置的典型场景——Bootstrap的自定义CSS覆盖了浏览器对HTML原生属性的默认解析，但我们有几种可靠的方法来解决这个需求：

方法1：用`all: revert`重置样式（推荐）

all: initial会把所有CSS属性重置为CSS规范定义的初始值（比如background-color的初始值是transparent），这会丢失HTML属性对应的样式。但all: revert不同——它会将元素的样式重置为浏览器的默认用户代理样式，而浏览器的默认逻辑是会识别并应用bgcolor这类HTML原生属性的。

你可以根据需求选择不同的实现方式：

针对单个表格（内联样式）

<table bgcolor="#D9D9D9" style="all: revert;">
  <!-- 表格内容 -->
</table>

针对多个表格（类选择器）

先定义CSS类：

.restore-native-styles {
  all: revert;
}

再给目标表格添加类：

<table bgcolor="#D9D9D9" class="restore-native-styles">
  <!-- 表格内容 -->
</table>

这个方法能一次性清除所有自定义CSS（包括Bootstrap的），让浏览器回到原生处理逻辑，自然就能保留bgcolor的预期效果。

方法2：针对性修复背景色（更精细）

如果你不想重置所有样式，只想恢复bgcolor的效果，可以直接用CSS覆盖Bootstrap的背景色设置，利用attr()函数直接读取HTML属性的值：

table[bgcolor] {
  background-color: attr(bgcolor);
  /* 如果Bootstrap样式优先级过高，可添加!important确保生效 */
  /* background-color: attr(bgcolor) !important; */
}

这里的[bgcolor]选择器会匹配所有带有bgcolor属性的表格，attr(bgcolor)会直接把属性里的颜色值作为background-color的值，精准覆盖Bootstrap的样式。