如何覆盖!important样式，无需JS即可回退到元素的inline内联样式？

可以实现，追加以下CSS规则即可：

div[style*="color:"] {
  color: revert !important;
}

原理解释 #

• 原有规则div { color: green !important; }是类型选择器的!important声明，优先级高于普通内联样式，因此覆盖了内联定义的color值。
• 新增的div[style*="color:"]是「类型选择器+属性选择器」组合，优先级高于单纯的类型选择器，同样添加!important后，会覆盖之前的green规则。
• revert关键字的作用是回退当前所有作者样式表中定义的color规则，最终降级使用元素内联样式中定义的color值，可适配任意内联设置的color。

兼容性说明 #

该方案兼容Chrome 110+、Firefox 110+、Safari 15.4及以上版本的现代浏览器，若需要兼容低于上述版本的老旧浏览器，暂时没有纯CSS实现方案。

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