是否有一个(polyfill)代码重置所有继承的CSS属性上的给定元素

Is there a (polyfill) code that resets all the inherited CSS properties on a given element?

本文关键字：CSS 继承 属性 元素 polyfill 有一个 代码 是否      更新时间：2023-09-26

主题说明了一切。寻找一个(polyfill)代码，将重置所有继承CSS属性上的给定元素(如<img>, <a>或<p>)。

如果你想完全重置浏览器的默认样式，那么现代的CSS方法是使用revert关键字和all属性:

all: revert;
从MDN

revert CSS关键字回滚级联，以便该属性采用当前样式源(author、user或user-agent)中没有样式时的值。在作者样式表中(通常情况下)，出于给定声明的目的，就好像没有作者级别的样式，因此将属性重置为由用户代理样式表(或由用户样式，如果存在的话)建立的默认值。

警告:它是在CSS级联和继承第4级工作草案中定义的，所以浏览器目前只支持Safari。

您可以创建其中一个元素，但不将其附加到DOM。然后，它不会从样式表中接收任何样式。然后，使用window.getComputedStyle，您将获得默认样式的列表。

var a = document.createElement('a');
var s = window.getComputedStyle(a);
myTargetEl.style.color = s.color;  // or, use a loop to do all of them

也许你可以使用HTML5 boilerplate或css Reset重置所有继承的CSS属性。

查看这些文章http://html5boilerplate.com/，

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

这听起来像all属性，遗憾的是，除了Firefox之外，其他浏览器还没有实现这个属性。

的例子:

h2 {
  all: initial; // Will reset any style set for h2 elements
}

见https://developer.mozilla.org/en-US/docs/Web/CSS/all

相关文章：