快速的答案是使用"all:revert"
.element {
all:revert;
}
all:revert
会将元素上的所有样式属性重置为原始浏览器默认的 UA 样式表属性值。但它不会像ERASE这样的样式属性initial
,将它们返回到完全无样式的状态。
对于文本或继承属性,"revert"
将元素的 CSS 属性重置为从“body”元素或浏览器的默认 UA 样式值继承的值,而不是属性的基本样式。对于非继承属性,它会再次将其重置为浏览器的 UA 默认样式表,而不是属性的基本样式。“all”允许影响所有属性。这可能是您希望看到的。
使用问题"all:revert"
"all:revert"
是一个较新的 CSS 声明,仅适用于更现代的 HTML5 浏览器(2015 年后),即便如此,在某些现代浏览器(如 Internet Explorer 1-11、Edge Trident 和一些移动浏览器)中的支持也很差。较旧的非 HTML5 浏览器(2010 年之前)都不会理解此声明,因此它将被各种新旧浏览器忽略。(请参阅下面的混合 CSS 解决方案,其中包含针对 Internet Explorer 的修复)。
使用问题"initial"
您可以使用"initial"
,"unset"
但您必须为每个属性手动应用它们,更糟糕的是,它们不会将属性返回到每个浏览器的默认 UA 样式表设置的元素默认显示值,但"initial"
实际上会删除元素的属性值并创建一个完全没有样式的元素。例如,块级元素上的“display:block”将被擦除。因为 style 属性仍然需要某种默认值,所以当你使用“display:initial”时,所有带有“display”的块级和非块级元素都将更改为“display:inline”。您永远不想这样做,因为它会完全从所选元素中删除您的样式和浏览器的默认 UA 元素样式。
我的建议是避免使用CSSall:initial
或任何形式的initial
CSS,除非您尝试删除无法以任何其他方式删除的单个 CSS 属性。为什么?initial
不仅会删除您应用的样式,还会删除浏览器默认 UA 样式表应用的所有样式。all:revert
不会这样做。在使用方面initial
,它确实在 Internet Explorer 中得到了更好的支持,它的堂兄inherit
. 但只有 IE8+ 能理解initial
。因此,此属性值存在广泛的问题。它不可靠。
CSS 以这种方式工作的原因是所有 HTML 元素都没有任何样式,直到浏览器应用默认的用户代理样式表,该样式表为所有 HTML 元素提供基本样式。所有的 HTML 元素实际上都没有样式,除了文本区域和按钮之类的“替换”元素之外,在应用每个浏览器的默认 UA 表之前,它们看起来都是一样的。“初始”和“未设置”将从浏览器中删除大部分内容。"revert"
至少保留了用户浏览器应用的基本样式集,因此优于"initial"
and "unset"
。您可以在下面的链接中查看浏览器附带的所有各种默认样式表。
默认浏览器样式表列表: https ://meiert.com/en/blog/user-agent-style-sheets/
现在寻求更好的解决方案
这里有两个想法被混淆:
- 第一个想法是将样式“返回”回浏览器的 UA 样式表值集(安装时浏览器附带的样式表定义了每个元素的外观)。每个浏览器都定义了自己的样式,以默认元素的外观。这个想法是关于将所有页面样式返回给每个浏览器的原生元素样式。
- 第二个想法是将所有默认浏览器样式“重置”为所有浏览器共享的通用外观。人们构建特殊的“重置”表来尝试将所有浏览器元素对齐到普遍认可的样式。这与浏览器默认的 UA 样式无关,更多的是关于“清理”并将所有浏览器对齐到一个通用的基本样式。这只是一个附加过程。
这是两个非常不同的概念,人们在这里感到困惑。
因为每个浏览器通常都有默认的、开箱即用的元素和看起来略有不同的布局样式,所以人们想出了“重置”或“重启”样式表的想法,以便在应用自定义 CSS 之前对齐所有浏览器。例如,Bootstrap 现在可以做到这一点。但这与想要恢复浏览器默认外观的人们无关。
问题不在于这些自定义“重置”样式表的构建,而是在应用任何样式之前弄清楚每个浏览器和每个元素的默认 CSS 是什么。大多数人发现在“清除”所有已应用的样式之前,您无法重建现有的干净级联。但是如何回到默认的浏览器样式呢?
对于某些人来说,这意味着不仅仅是将元素返回到浏览器附带的浏览器 UA 样式表。许多人想重置回“初始”属性值,这与浏览器的默认样式无关,但实际上是属性默认值。这是危险的,因为“显示”会将块级元素推回“内联”并破坏表格布局和其他东西。
所以我不同意这里的用户使用“初始”来重置任何东西或自定义重置类将每个属性更改回某个任意基值集。
对我来说更好的解决方案一直是尝试将所有核心元素样式返回到浏览器的 UA 样式表值,这也是我们所有最终用户都在使用的。如果您正在创建一个新网站,则不必这样做。您从浏览器的默认样式和样式开始。只有在您添加了第三方 CSS 产品,或者发现自己有复杂的 CSS 级联之后,您才想弄清楚如何返回浏览器默认样式表值。
出于这个原因,我要创建您自己的“重置”表,首先将所有元素重置为一个通用样式,该样式由所有新旧浏览器共享作为第一步。然后,您将拥有一个可靠的框架,无需返回浏览器默认设置即可轻松恢复。您只是建立在一组重置的通用核心元素样式值之上。一旦构建了自己的“重置”表,即添加不更改浏览器 UA 样式的表,您就有了一个非常容易修改的站点。
剩下的唯一问题是当您的网站没有这样的重置表,或者有复杂的第三方 CSS 并且需要尝试返回浏览器 UA 样式时。你是怎样做的?
我意识到 Internet Explorer 已经迫使我们手动重置每个属性以恢复任何类型的重置。但是将这些属性值全部推回“初始”会完全破坏浏览器 UA 样式表值!馊主意!更好的方法是使用通配符对非 IE 浏览器的每个元素简单地使用“all:revert”,而“继承”仅用于在“html”和“body”元素中找到的少数继承的根级属性影响页面中的所有继承子项。(见下文)。我不赞成使用“初始”或回到我们假设所有浏览器或 IE 都将使用的某些虚构标准来进行这些巨大的属性重置。对于初学者,“初始”在 IE 中的支持很差,并且不会将值重置为元素默认值,只有属性默认值。但是,如果您要创建一个重置表以将所有元素对齐到一个通用样式,这也是没有意义的。在这种情况下,清除样式并重新开始是没有意义的。
所以这是我的简单解决方案,在大多数情况下,它足以重置从根目录筛选到 IE 中的基于文本的值,并对所有非 IE 浏览器使用“all:revert”来强制非继承值返回浏览器的 UA样式表完全,给你一个真正的重新启动。这不会干扰在元素样式上分层的更高级别的类和样式,无论如何这应该始终是目标。这就是为什么我不喜欢这些繁琐且不必要的自定义重置类,并且无论如何也不会将元素返回到其浏览器 UA 样式。请注意下面的选择性稍强的选择器,它们会覆盖例如 Bootstrap 的“重启”样式值,将它们返回到浏览器默认样式。当然,这些不会重置 IE 元素上的元素样式,
:root, html {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-text-size-adjust: inherit;
-webkit-tap-highlight-color: inherit;
all: revert;
}
html body {
display: block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: inherit;
padding: inherit;
color: inherit;
text-align: inherit;
background-color: inherit;
background: inherit;
all: revert;
}
/* This rule attempts to manually reset all elements back to the
UA browser style sheet using "revert" and the "wildcard" (*)
which resets all properties on all HTML elements.
This would overwrite most of Bootstraps "reboot" styles
on elements, for example.
Note: This selector should be ignored by IE. */
html body * {
all: revert;
}