all:初始化vs.使用CSS重置

Question

我知道有很多所谓的"css重置"，例如

https://ageek.dev/normalize-css

https://meyerweb.com/eric/tools/css/reset/
• 或
• https://elad2412.github.io/the-new-css-reset/

但我不明白的是为什么似乎不能使用更简单的方法。

据我所知，initial关键字将属性重置为CSS规范中定义为该属性的默认值的值。

现在我们有了类似all属性的关键字，我希望我可以使用像

这样的东西

* {
all: initial;
}
or
:root {
all: initial;
}

代替所有这些reset.csss和normalize.csss。也就是说，我希望这些简短的代码片段能够帮助我从用户代理样式表中删除添加到网页上的样式。

但是它并没有像我期望的那样工作。似乎

:root, html, body {
all: initial
}

并不能真正删除style "inherited"从用户代理样式表，和

* {
all: initial
}

过于激进地删除样式。例如，它使我的style和script元素可见!我不认为CSS规范说这两个元素应该是可见的。我确信CSS规范说它们应该是而不是可见。也就是说，

* {
all: initial
}

不是将样式重置为CSS规范级别，而是将它们重置为绝对零级别。这不是我想要的

---

谁能解释一下我的理解有什么问题?

Answer 1

你是正确的，initial重置为给定的CSS属性的初始值，但请注意，CSS属性对于每个元素没有初始值——它们只有属性的初始值，这对于它应用的任何和所有元素都是相同的。例如，color属性规范定义了一个初始值——而不是为每个元素设置的初始值列表。因此，当您将它与all结合使用时，请使用:

* {
all: initial
}

…你是在告诉浏览器获取每个元素的每个属性，并将其重置为属性的默认值。因此，例如，display属性规范将其初始值定义为inline——因此页面上的每个元素将显示为inline。