如何取消 HTML 元素的样式？

使用 `all: revert` 或者 `all: unset`。

MDN 文档中提到，`revert` 关键字在很多情况下与 `unset` 完全相同，唯一的区别是对于由浏览器或用户创建的自定义样式表（在浏览器端设置）设置的属性的值。

你需要一个可用的 CSS 规则，以删除样式表中为特定元素设置的任何样式。

所以，如果该元素有一个类名为 `remove-all-styles`：

HTML:

 
   
   
 My text 

使用 CSS:

.remove-all-styles {
  all: revert;
}

这将重置应用于 `div` 元素的 `other-class`、`another-class` 和所有其他继承和应用的样式。

或者在你的情况下：

/* mobile first */
.element {
  margin: 0 10;
  transform: translate3d(0, 0, 0);
  z-index: 50;
  display: block;
  etc..
  etc..
}
only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

将起作用。

如果我们想要将嵌入的小部件/组件与包含它们的页面的样式隔离开来，我们可以编写：

.isolated-component {
  all: revert;
}

这将还原所有作者样式（即开发者的 CSS）到用户样式（我们网站的用户设置的样式，这种情况不太可能发生），或者如果没有用户样式，则还原为用户代理样式本身。

如何取消HTML元素的样式？

问题原因：要取消HTML元素的样式，可以使用CSS的all属性。但是这个属性在Internet Explorer浏览器中不起作用。

解决方法：

CSS:

#someselector {
  all: initial;
}
#someselector * {
  all: unset
}

SCSS:

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

这种方法适用于所有主流浏览器，但不适用于Internet Explorer。

另外，在MDN文档中提到，对于继承的属性，初始值可能会让人感到惊讶，建议使用inherit、unset或revert关键字。其中，revert对于组件/小部件非常有用，但是MDN文档中没有清楚地说明如何使用。可以参考developer.mozilla.org/en-US/docs/Web/CSS/revert。

如果你想给#someselector添加一些样式，并重置其他已设置的样式，可以尝试使用initial和unset结合其他样式（如color或border），但这种方法可能不起作用。

要重置除某些样式之外的所有样式，可以使用以下方法（例如，假设我们想保持font-size为18px）：

#selector {
  all: initial;
  font-size: 18px;
}

我建议尝试使用revert而不是unset，否则像table和details这样的用户代理默认样式将会全部失效。

如何去除HTML元素的样式？

问题的出现原因是，有时候我们需要将HTML元素的样式还原为初始值，但是不同浏览器对于初始值的定义可能不同，而且在IE和Opera Mini家族中并不支持CSS属性all的关键字initial。

解决方法有两种：

1. 使用all属性和unset关键字：

#reset-this-root {
    all: unset;
}

2. 逐个重置CSS属性为初始值：

.reset-this {
    /* 重置所有CSS属性为初始值 */
    /* ... */
    /* 或者重置特定的CSS属性为初始值 */
    animation: none;
    animation-delay: 0;
    animation-direction: normal;
    /* ... */
}

然而，需要注意的是，这种方法并不是真正的重置，因为某些元素在默认情况下具有特定的样式，如果使用上述方法重置，可能会导致这些元素失去特定的样式。因此，可以根据需要选择特定的属性进行重置，或者结合*选择器来重置所有元素或特定元素内部的所有元素。

总结一下，使用all属性和unset关键字可以实现对HTML元素样式的重置，但需要注意不同浏览器对于初始值的定义可能不同。另外，逐个重置CSS属性为初始值的方法可以更精确地控制需要重置的属性，但需要注意某些元素在默认情况下具有特定的样式。