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

Question

我正在开发一个浏览器扩展程序，将其用户界面添加到页面DOM中。在某些页面上，我遇到了一些问题，特定的样式会影响我的UI。为了解决这个问题，我将我的UI保持在一个公共根下，该根重置了大部分样式为默认值。

有时我会错过一些东西，导致我的UI出现视觉故障。（例如，页面CSS文件设置form { width: 80%; }，因此我需要添加form { width: auto; }到我的重置样式中。

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

- Martin Thurau

---

这不完全是你要找的，但也许会有所帮助：https://github.com/necolas/normalize.css - idmean

看起来你正在 https://dev59.com/x2Uo5IYBdhLWcg3wnwj2 寻找答案。 - JoeDuncko

来自七年后的访问。我们还没有它，但是在某些时候看到.my-element, .my-element * {all: default;}会很棒。 - Rounin

影子 DOM / 自定义元素是 Web 组件的最佳选择。 - David Vielhuber

Answer 1

我遇到了同样的问题。其他答案列出的通常CSS规范化程序并不能解决这个问题，因为它是用来取消浏览器默认样式之间差异的。

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

我发现了这个解决方案（我不确定在7年前的问题时是否可行）。

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

迄今为止，它似乎通过消除不同网站之间的差异来达到目标。不过缺点是它甚至重置了一些默认样式（例如，ol，ul，li 不会像列表那样表现）。

- Sebastien C.

Answer 2

1. Eric Meyer的“重置CSS”2.0
   _{（原始版本）}

2. HTML5 Doctor CSS Reset
   _{（扩展了Eric Meyer的版本以提高对HTML5标签的重置）}

3. Yahoo！（YUI 3）Reset CSS
   _{（基于Normalize.css）}

4. 通用选择器'*'重置

5. Normalize.css 1.0 2.1.3
   _{（“…由Twitter Bootstrap，HTML5 Boilerplate，YUI 3，Pure，TweetDeck，Soundcloud，Medium，NASA，GOV.UK，Guardian，Rdio，Favstar，iA和许多其他公司使用。”）}

还有其他的CSS重置脚本，但这些仍然是2012年最受欢迎的CSS重置脚本。

- Andrea Ligios

---

我认为这些框架在这里并不是真正的解决方案。它们基于浏览器预定义的默认样式工作。但是马丁所要求的是一种超级激进的重置，它不会对之前应用的样式做出（许多）假设。 - h0b0

Answer 3

我建议使用快速的谷歌搜索来查找类似这样的东西：http://meyerweb.com/eric/tools/css/reset/

您可以直接实现重置，如果以后出现任何问题，只需根据需要添加即可。

请注意，有些预制的CSS重置需要在使用时进行引用。

- Joel Worsham

Answer 4

是的，绝对没问题。

在这方面有两种思路。一种是零化样式重置表格，基本上从CSS中删除所有边距、填充和其他设置。一个很好的例子是Eric Meyer's Reset CSS。

另一种方法是将所有东西设置为你合理地期望它们的样子，为段落和标题设置合理的外边距，缩进列表等。一个很好的例子是Normalize.css。

一些浏览器还支持initial值，它将属性的值设置回最初的值。在我看来，它的支持程度不够广泛，不能在生产中使用。

- Owen C. Jones

Answer 5

Html5 boilerplate有一个normalize.css，它将许多CSS样式设置为默认值。 http://html5boilerplate.com/

- veelen

Answer 6

由于您正在应用不同的唯一样式到不同的页面上，很难说您是否能够成功地使用一些CSS重置来删除所有页面上的所有样式。

但也许这些可以帮助：

Normalize.css（被许多CSS框架使用）

Meyer的CSS重置

- Claudio Holanda