将所有内容设置为默认值的 CSS 重置

Question

我正在开发一个浏览器扩展程序，它将其 UI 添加到页面 DOM 中。在某些页面上，某些样式会影响我的 UI。为了解决这个问题，我将我的 UI 保留在一个公共(public)根目录下，该根目录将大多数样式重置为默认值。

有时我会漏掉一些东西，这会导致我的 UI 出现视觉故障。 (即页面 ​​CSS 文件设置 form { width: 80%; } 所以我需要添加 form { width: auto; } 到我的重置样式。

是否有一组样式可以将每个 CSS 属性重置为每个元素的标准声明的默认值？

Answer 1

我遇到了同样的问题。其他答案列出的常用 CSS 规范化器并没有回答这个问题，因为它是为了消除浏览器默认样式之间的差异。

在扩展的上下文中，我需要取消随机网站上可能存在的所有特定样式。

我遇到过这个解决方案(我不确定在 7 年前提出问题时是否可行)。

.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
    all: initial;
}

到目前为止，它似乎通过消除网站之间的差异来实现目标。缺点是它甚至会重置一些默认样式(例如，ol、ul、li 的行为不像列表)。