是否有一条CSS规则可以删除样式表中为特定元素设置的任何先前样式？一个很好的使用示例可能是移动优先的RWD网站，在小屏幕视图中用于特定元素的大部分样式在桌面视图中需要“重置”或删除。
一条CSS规则可以实现类似以下效果：
.element {
all: none;
}
示例用法：
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
@media only screen and (min-width: 980px) {
.element {
all: none;
}
}
因此，我们可以快速删除或重置样式，而无需声明每个属性。
CSS属性all有一个关键字initial，可以将CSS属性设置为规范中定义的初始值。除了IE和Opera Mini家族外，all关键字在广泛的浏览器中得到支持。点击此处查看详情。
/* basic modern patch */
#reset-this-root {
all: unset;
}
#reset-this-root {
all: initial;
}
由于IE的支持不足可能会导致问题，以下是一些重置某些CSS属性到初始值的方法：
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
/* basic modern patch */
all: initial;
all: unset;
}
以上所述，除非只存在一种网络浏览器并且最终浏览器设置了“默认”值，否则我认为 CSS 重置不可行。
all 属性可以实现这一功能，其工作方式如下：
CSS：
CSS：
#someselector {
all: initial;
}
#someselector * {
all: unset
}
SCSS：
#someselector {
all: initial;
* {
all: unset;
}
}
all: revert; 在 MDN 文档中对于组件/小部件听起来非常有用，但从 @AsimKT 的评论中并不清楚它应该如何使用。你能详细说明一下吗？https://developer.mozilla.org/en-US/docs/Web/CSS/revert - Micros#selector { all: initial; font-size: 18px; }。对我非常有效！ - aderchoxrevert而不是unset，否则用户代理对于诸如<table>和<details>之类的元素的默认设置将全部崩溃。 - James Pearceall: revert或all: unset。您需要“一个可用的CSS规则，可以删除之前为特定元素在样式表中设置的任何样式。” 因此，如果元素具有类名在许多情况下，revert关键字的工作方式与
unset完全相同。唯一的区别是对于由浏览器或用户创建的自定义样式表（在浏览器端设置）设置的属性具有值的属性。
remove-all-styles：<div class="remove-all-styles other-classe another-class">
<!-- content -->
<p class="text-red other-some-styles"> My text </p>
</div>
.remove-all-styles {
all: revert;
}
other-class、another-class 以及所有继承和应用于该 div 的样式。/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
@media only screen and (min-width: 980px) {
.element {
all: revert;
}
}
好的。
如果我们想要将嵌入式小部件/组件与包含它们的页面的样式隔离开来，我们可以编写以下代码：
.isolated-component {
all: revert;
}
快速答案是使用"all:revert"
.element {
all:revert;
}
all:revert会将元素上的所有样式属性重置回原始浏览器默认UA样式表属性值，或者返回父级body元素中的样式。但它不会擦除像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"和"unset"时可能出现的问题
您可以使用"initial"或"unset"，但必须为每个属性手动应用它们，更糟糕的是，它们不会将属性返回到由每个浏览器的默认UA样式表设置的元素的默认显示值，但"initial"本质上会擦除元素的属性值并创建一个完全未经过样式化的元素。例如，在块级元素上的"display:block"将被擦除。因为样式属性仍然需要某种默认值，所有具有"display"的块级和非块级元素都将在使用"display:initial"时更改为"display:inline"。您不希望这样做，因为它会完全擦除您的样式和所选元素的浏览器默认UA元素样式。
"unset"的工作方式与此类似，但对于继承的基于文本的CSS属性，其属性继承在元素上面的父级中继承任何内容（可能是浏览器的默认UA样式或上面的HTML父级中的任何内容），但对于非继承属性，它的工作方式类似于"initial"。
all:initial或任何形式的initial，除非你试图消除其他方法无法消除的单个CSS属性。为什么？initial不仅会擦除你应用的样式，还会擦除浏览器默认UA样式表应用的所有样式。 all:revert不会这样做。就使用initial而言，它在Internet Explorer中具有更好的支持，与其类似的是inherit。但只有IE8+才能理解initial。因此，此属性值存在各种问题，不可靠。 :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;
}
您还可以使用我的免费通用CSS框架，它在重置样式表中实现了 revert。
你需要在HTML文档中插入标记，并且它需要以特定的方式显示。此外，你并不拥有这个文档，因此无法更改现有的样式规则。你不知道样式表可能是什么，或者它们可能会变成什么样。
这种情况的应用场景是当你为未知的第三方网站提供可显示组件时。例如：
把所有东西放到 iframe 中。这也有其自身的限制：
如果你的内容可以适应一个框，你可以通过让你的内容编写一个iframe并明确设置内容来绕过问题#1，从而规避该问题，因为iframe和文档将共享相同的域。
CSS解决方案你所能做的最好的事情就是显式地覆盖所有可能被覆盖的属性，并将它们覆盖为你认为它们的默认值应该是什么。
即使在你覆盖时，也没有办法确保更具针对性的CSS规则不会覆盖你的规则。你在这里能做到的最好的事情就是尽可能地使你的覆盖规则具有特定的目标，并希望父文档不会意外地超越它：在你内容的父元素上使用一个模糊或随机的ID，并在所有属性值定义上使用!important。
p { color: blue} 不会被重置）。 - Cameron其他方法：
1）引入Yahoo CSS reset的 CSS 代码（文件），然后将所有内容放入该 DIV 中：
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2) 或者使用
如果你正在使用sass构建系统，一种在所有主要浏览器中都有效的方法是将所有样式导入包装在:not()选择器中，如下所示...
:not(.disable-all-styles) {
@import 'my-sass-file';
@import 'my-other-sass-file';
}
你可以在一个容器上使用disable类，然后子内容就不会有任何你的样式。
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>
我不建议使用标记为正确答案的内容，因为它是一个试图覆盖所有情况的庞大的CSS代码块。
我建议您根据具体情况评估如何从元素中删除样式。
比如说，出于SEO目的，您需要在一个没有实际标题设计的页面上包含H1。您可能希望将该页面的导航链接设置为H1，但当然您不希望该导航链接在页面上显示为巨大的H1。
您应该将该元素包装在h1标签中并进行检查。查看哪些CSS样式特别应用于h1元素。
假设我看到以下样式应用于该元素。
//bootstrap.min.css:1
h1 {
font-size: 65px;
font-family: 'rubikbold'!important;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
}
//bootstrap.min.css:1
h1, .h1 {
font-size: 36px;
}
//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 20px;
margin-bottom: 10px;
}
//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
//bootstrap.min.css:1
h1 {
margin: .67em 0;
font-size: 2em;
}
//user agent stylesheet
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.no-style-h1 {
font-size: unset !important;
font-family: unset !important;
font-weight: unset !important;
font-style: unset !important;
text-transform: unset !important;
margin-top: unset !important;
margin-bottom: unset !important;
line-height: unset !important;
color: unset !important;
margin: unset !important;
display: unset !important;
-webkit-margin-before: unset !important;
-webkit-margin-after: unset !important;
-webkit-margin-start: unset !important;
-webkit-margin-end: unset !important;
}
这样做更加简洁，不会将一个随机的代码块倾泻到你的CSS中，而你并不知道它实际上在做什么。
现在，您可以将此类添加到您的h1标签中。
<h1 class="no-style-h1">
Title
</h1>
<body class='common-styles'>
<div id='header'>Wants common styles</div>
<div id='container'>Does NOT want common styles</div>
<div id='footer'>Wants common styles</div>
</body>
$(function() {
$('body').removeClass('common-styles');
$('#header,#footer').addClass('common-styles');
});
如果有人正在寻找使用 iframe 的答案，这里提供一份:
<iframe srcdoc="<html><body>your-html-here</body></html>" />
all的属性正在被提议，用于将给定元素的所有CSS属性重置为某些CSS全局值 - 您想使用的值是unset，它将属性重置为其默认继承的值，否则为其初始值。没有关于实现的消息，但知道有人已经考虑过这个问题很不错。 - BoltClock