1. 通用CSS选择器带来的样式冲突问题
在前端开发中，尤其是在集成第三方组件或库时，一个常见且令人头疼的问题是，项目中定义的通用css选择器（如全局的*选择器或针对特定html标签的样式）可能会意外地覆盖或破坏第三方库的内部样式。例如，以下css规则：
* {
font-family: arial;
}
div {
border-bottom: 1px solid;
}这些看似无害的全局样式，可能导致依赖特定字体或边框表现的库（如jQuery Terminal）功能异常或视觉错乱。库开发者通常会为其组件编写详细且特异的CSS，但这些特异性有时无法完全对抗全局性的、优先级可能更高的通用选择器。
2. 传统解决方案的局限性与all属性的误解
为了解决这类冲突，开发者可能会尝试多种方法，但往往效果不佳或带来新的问题。
2.1 针对性覆盖与维护成本
一种直接的方法是为库内部的所有元素手动重置或定义样式。例如，针对.terminal内部的所有元素设置字体：
.terminal * {
font-family: monospace;
/* ... 为所有可能被覆盖的属性逐一设置 */
}这种方法的问题在于维护成本极高。每次库更新引入新元素或新的CSS属性时，都需要手动检查并更新这些重置样式。此外，如果用户定义了更复杂的通用选择器（如div），这种方法也无法完全覆盖。
立即学习“前端免费学习笔记（深入）”；
2.2 all属性的尝试与陷阱
CSS all 属性是一个强大的简写属性，它可以将所有CSS属性（除了direction和unicode-bidi）重置为它们的初始值、继承值、unset值或revert值。开发者常试图利用它来隔离样式：
- all: unset;: 将所有属性重置为它们的继承值（如果可继承）或初始值（如果不可继承）。
- all: initial !important;: 强制将所有属性重置为它们的初始值。
然而，当尝试将这些属性应用于库的特定范围时，例如：
.terminal * {
all: initial !important; /* 或 all: unset; */
}这往往会导致灾难性的后果。库自身的CSS样式也会被完全清除，所有元素都回到了浏览器的默认状态或初始状态，使得库完全失去其预期的外观和功能。这是因为initial会将属性重置为该属性的默认值，而unset会重置为继承值或默认值，这两种方式都未能保留库自身定义的样式。
3. all: revert：优雅的解决方案
all: revert 是解决此类样式冲突的理想方案。它旨在将所有CSS属性的值回滚到它们在上一个级联层中的值。对于我们遇到的问题，这意味着它会回滚到用户代理样式表（浏览器默认样式）或继承值，同时允许作者定义的特异性样式继续生效。
3.1 revert关键字的工作原理
当一个元素应用了all: revert;时，其所有CSS属性将表现为：
- 用户代理样式表（User Agent Stylesheet）：如果该属性在用户代理样式表中定义了默认值，并且没有其他作者样式覆盖它，则使用该值。
- 继承（Inheritance）：如果该属性是可继承的，并且其父元素有定义，则继承父元素的值。
- 作者样式（Author Styles）：最重要的是，revert会尊重那些具有更高特异性或在级联顺序中更靠后的作者样式。这意味着，如果库内部有针对特定元素的更具体样式，这些样式将会在revert之后再次应用，从而保持库的视觉完整性。
3.2 示例代码与效果演示
要将all: revert应用于第三方库（例如.terminal）及其内部所有元素，可以这样编写CSS：
/* 全局通用样式，可能会影响到所有div */
div {
border-bottom: 1px solid blue;
font-family: sans-serif;
}
/* 针对.terminal及其内部元素应用all: revert */
.terminal, .terminal * {
all: revert;
}
/* .terminal 自身的样式，这些样式将在revert之后再次应用 */
.terminal {
background: black;
color: #ccc;
font-family: monospace;
}结合以下HTML结构：
Applied
not affected
效果分析：
- 第一个Applied会受到全局div样式的影响，显示蓝色下边框和sans-serif字体。
- .terminal外部的全局div样式对.terminal及其内部的div不再产生影响。
- .terminal元素本身将应用background: black; color: #ccc; font-family: monospace;这些样式。
- .terminal内部的not affected将不会受到全局div样式的影响，而是回滚到其用户代理默认样式或继承自.terminal的样式（如font-family）。这使得库内部的元素能够保持其预期的外观，而不被外部通用样式所干扰。
4. 注意事项与最佳实践
- 浏览器兼容性：all: revert是一个相对较新的CSS关键字。在使用前，务必检查其浏览器支持情况（可通过caniuse.com查询）。对于不支持的旧版浏览器，可能需要提供降级方案或权衡是否使用。
- 应用范围：all: revert应谨慎应用于需要隔离的特定组件或库的根元素及其所有子元素。避免将其应用于全局范围，以免意外清除整个页面的样式。
- 未来兼容性：all: revert的优势在于其未来兼容性。当CSS引入新的属性时，它能够自动处理，无需手动更新重置规则，因为它总是回滚到级联层中的前一个有效值。
- 级联层理解：深入理解CSS的级联层（User Agent Stylesheet, Author Stylesheet, User Stylesheet）有助于更好地利用revert。revert的本质是回滚到用户代理样式层，除非有更具体的作者样式或用户样式存在。
5. 总结
all: revert为前端开发者提供了一个优雅且强大的解决方案，用于解决第三方库与通用CSS选择器之间的样式冲突。它通过智能地回滚属性值，既隔离了外部干扰，又保留了库自身的特异性样式，从而大大简化了维护工作，并提升了组件的稳定性。在构建复杂应用时，合理运用all: revert是确保样式隔离和组件完整性的关键实践。
