仅为元素重置/删除CSS样式

我相信以前一定有人提到过/问过这个问题，但一直在寻找一个没有运气的时代，我的术语一定是错的!

我模糊地记得我不久前看到的一条tweet，它建议有一个可用的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;
}
}

因此，我们可以快速删除或重新设置样式，而不必声明每个属性。

有道理吗?

1290473 次浏览
小开

你有没有可能在找!重要规则?它不会撤销所有声明，但它提供了一种重写它们的方法。

当一个!important规则被用于一个样式声明时，这个声明将覆盖CSS中任何其他声明，无论它在声明列表中的哪个位置。虽然，重要与具体无关。”

< a href = " https://developer.mozilla.org/en-US/docs/CSS/Specificity The_ !important_exception rel =“nofollow”> https://developer.mozilla.org/en-US/docs/CSS/Specificity The_ !important_exception < / >

小开
最佳答案

CSS3关键字initial设置CSS3属性转换为规范中定义的初始值。除了IE和Opera Mini系列，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;
}


/* basic modern patch */


#reset-this-root {
all: initial;
* {
all: unset;
}
}

正如@user566245的评论中提到的:

原则上这是正确的，但个人里程可能会有所不同。为 例如，某些元素，如textarea，默认有边框， 应用此重置将使这些textarea的边框减少

JAVASCRIPT ?

没有人想到除了css重置css?是吗?

这里有一个完全相关的片段:https://stackoverflow.com/a/14791113/845310

getElementsByTagName("*")将返回DOM中的所有元素。然后你 可以为集合中的每个元素设置样式:

13年2月9日20:15由VisioN回答

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}

说了这么多;我不认为CSS重置是可行的，除非我们最终只有一个web浏览器。如果'default'是由浏览器设置的。

为了进行比较，这里是Firefox 40.0的值列表 <blockquote style="all: unset;font-style: oblique">，其中font-style: oblique触发DOM操作 
align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;
小开

另一个方法:

1)包括css代码(文件)雅虎CSS重置，然后把一切都放在这个DIV:

<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>

2)或使用

小开

让我彻底地回答这个问题，因为这几年来一直是我痛苦的根源，很少有人真正理解这个问题，以及为什么解决这个问题很重要。坦率地说，如果我是CSS规范的负责人，我会很尴尬，因为在过去的十年里没有解决这个问题。

这个问题

您需要将标记插入到HTML文档中，并且它需要以特定的方式显示。此外，您不拥有此文档，因此不能更改现有的样式规则。您不知道可以样式表是什么，也不知道它们可能会变成什么。

这种情况的用例是当您为未知的第三方网站提供可显示的组件时。这方面的例子有:

  1. 广告标签
  2. 构建插入内容的浏览器扩展
  3. 任何类型的小部件

简单的修理

把所有东西都放在iframe中。这有它自己的一组限制:

  1. 跨域限制:您的内容根本无法访问原始文档。您不能覆盖内容、修改DOM等。
  2. 显示限制:你的内容被锁定在一个矩形内。

如果您的内容可以适合一个盒子，您可以通过让您的内容编写一个iframe并显式地设置内容来绕过问题#1，因为iframe和文档将共享相同的域。

CSS解决方案

我到处寻找这个问题的解决方案，但不幸的是没有。最好的方法是显式地覆盖所有可以覆盖的属性，并将它们覆盖到认为它们的默认值。

即使你重写，没有办法确保更有针对性的CSS规则不会覆盖你的规则。在这里，您能做的最好的事情是让覆盖规则目标尽可能明确，并希望父文档不会意外地优于它:在内容的父元素上使用模糊或随机的ID，并在所有属性值定义上使用!important。

小开

给以后的读者。我认为这就是我的意思，但目前并没有得到广泛支持(见下文):

CSS:

#someselector {
all: initial;
}


#someselector * {
all: unset
}

SCSS:

#someselector {
all: initial;
* {
all: unset;
}
}
  • 支持(源): Chrome 37, Edge 79, Firefox 27, IE 11, Opera 24, Safari 9.1, WebView Android 37, Chrome Android 37, Firefox for Android 27, Opera Android 24, Safari on iOS 9.3, Samsung Internet 3.0
  • 不支持:Internet Explorer
小开

更好的解决方案

下载“复制/粘贴”样式表，将css属性重置为默认值(UA样式) # EYZ0 < / p > < p > Thanks@Milche论!
我真的在寻找重置/默认样式的属性值。我的第一次尝试是从根(html)元素的浏览器Dev工具中复制计算值。但根据它的计算，它在每个系统上看起来/工作起来都不一样。
对于那些在尝试使用星号*重置子元素的样式时遇到浏览器崩溃的人(我知道这对您不起作用)，我已经将星号“*”替换为所有HTML标记名称。浏览器没有崩溃;我在Chrome版本46.0.2490.71米。
最后，值得一提的是，这些属性将把样式重置为最顶层根元素的默认样式，而不是每个HTML元素的初始值。所以为了纠正这个问题，我采用了基于webkit的浏览器的“user-agent”风格，并在“reset-this”类下实现它。

有用的链接: < p > < br > 下载“复制/粘贴”样式表将css属性重置为默认值(UA样式):
# EYZ0 < / p > < p > user - agent风格:< br > # EYZ0 < br > # EYZ0 < br > < / p >

Css规格(注意规格):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

小开

你提到了移动优先的网站……对于响应式设计，用大屏样式覆盖小屏幕样式当然是可能的。但你可能不需要这样做。

试试这个:

.thisClass {
/* Rules for all window sizes. */
}


@media all and (max-width: 480px) {
.thisClass {
/* Rules for only small browser windows. */
}
}


@media all and (min-width: 481px) and (max-width: 960px) {
.thisClass {
/* Rules for only medium browser windows. */
}
}


@media all and (min-width: 961px) {
.thisClass {
/* Rules for only large browser windows. */
}
}

这些媒体查询不会重叠，因此它们的规则不会相互覆盖。这使得单独维护每一组样式更加容易。

小开

对于那些试图弄清楚如何真正从元素中删除样式，而不从文件中删除css的人，这个解决方案使用jquery:

$('.selector').removeAttr('style');
小开

对于这个问题，有一个全新的解决方案。

使用all: revert或all: unset。

中数:

在许多情况下，revert关键字的工作原理与unset完全相同。的 唯一的区别是属性的值是由浏览器设置的 或者通过用户创建的自定义样式表(在浏览器端设置)

你需要可用的css规则，可以删除之前在样式表中为特定元素设置的任何样式。

因此，如果元素的类名是remove-all-styles:

例如:

HTML:

<div class="remove-all-styles other-classe another-class">
<!-- content -->
<p class="text-red other-some-styles"> My text </p>
</div>

用CSS:

  .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;
}
}

会做的事情。

这里我们使用了一个很酷的CSS属性和另一个很酷的CSS值。

  1. # EYZ0
实际上，revert，顾名思义，将该属性还原为其

.用户或用户代理样式
  1. # EYZ0
当我们使用revert和all属性时，所有的CSS属性 应用于该元素将恢复为user/user-agent样式

点击这里了解author, user, user-agent风格的区别

例如:如果我们想要将嵌入的小部件/组件与包含它们的页面的样式隔离开来，我们可以这样写:

.isolated-component {
all: revert;
}

这将恢复所有author styles(即开发CSS)到user styles(样式，我们的网站的用户设置-不太可能的情况下)或user-agent样式本身，如果没有用户样式设置。

更多细节:https://developer.mozilla.org/en-US/docs/Web/CSS/revert

唯一的问题是支持:在撰写本文时，只有Safari 9.1和iOS Safari 9.3支持revert值。

所以我会说使用这种风格，然后退回到其他答案。

小开

如果你在类中设置CSS， 你可以使用jQuery removeClass()方法轻松删除它们。 下面的代码删除了.element类:

    <div class="element">source</div>
<div class="destination">destination</div>
  <script>
$(".element").removeClass();
</script>

如果没有指定参数，该方法将删除

.

.
小开

我不建议使用这里标记为正确的答案。它是一个巨大的CSS，试图覆盖一切。

我建议您评估如何根据具体情况从元素中删除样式。

比如说，为了搜索引擎优化的目的，你需要在一个没有实际标题的页面上包含一个H1。你可能想让该页面的导航链接为H1，但当然你不希望该导航链接在页面上显示为一个巨大的H1。

您应该做的是将该元素包装在h1标记中并检查它。看看h1元素具体应用了哪些CSS样式。

假设我看到以下样式应用于元素。

//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;
}

现在你需要针点准确的样式，这是应用到H1和在css类中取消设置。它看起来会像下面这样:

.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>

在打乱CSS重置并没有带来多大成功(主要是因为规则优先级和复杂的样式表层次结构)之后，出现了无处不在的jQuery来拯救它，它很快就完成了这项工作，而且相当脏:

$(function() {
$('body').removeClass('common-styles');
$('#header,#footer').addClass('common-styles');
});

(现在告诉你用JS来处理CSS是多么的邪恶:-))

小开

如果你碰巧在构建系统中使用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>

当然，现在所有的样式都将以:not()选择器作为前缀，所以这有点难看，但效果很好。

小开

简单的答案是使用"all:revert"

.element {
all:revert;
}

但它不会像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”;在块级别的元素将被擦除。因为style属性仍然需要某种默认值所有块和非块级别的元素都带有"display"将更改为“display:inline”;当你使用"display:initial";你不希望这样做，因为它擦除你的样式和浏览器的默认UA元素样式从选定的元素完全。

"unset"的工作方式接近于"initial"，但在继承基于文本的CSS属性的情况下，它的属性继承了元素上面的父元素中的任何内容(可能是浏览器默认的UA样式或上面的HTML父元素中的任何内容)，但对于非继承的属性则像"initial"一样工作。

我的建议是避免使用all:initial或任何形式的initial在CSS中，除非你试图删除一个单独的CSS属性，你不能用任何其他方式删除。为什么?initial不仅会擦除你应用的样式，还会擦除浏览器默认UA样式表应用的所有样式。all:revert不会这样做。在使用initial方面，它在Internet Explorer中有更好的支持，它的兄弟inherit也是如此。但是只有IE8+能理解initial。因此，这个属性值存在广泛的问题。它不可靠。

CSS是这样工作的的原因是所有HTML元素都没有任何样式，直到浏览器应用默认的用户代理样式表，为所有HTML元素提供基本样式。所有HTML元素都没有样式，除了"replace "文本区域和按钮等元素看起来很相似，直到每个浏览器的默认UA表被应用。“initial"和“;unset"会从浏览器中抹去大部分信息。"revert"至少保留了用户浏览器应用的基本样式集，因此优于"initial"和"unset"。您可以在下面的链接中查看浏览器附带的所有默认样式表。

一个默认浏览器样式表的列表: # EYZ0 < / p >

现在有一个更好的解决方案

这里有两个概念被混淆了:

  1. 第一个想法是关于“回归”;样式返回到浏览器的UA样式表值集(安装时浏览器附带的样式表，定义每个元素的外观)。每个浏览器都定义了自己的默认元素样式。这个想法是关于将所有页面样式返回到每个浏览器的原生元素样式。
  2. 第二个想法是关于“重置”。所有默认浏览器样式均为所有浏览器共享的通用外观。人们建立特殊的“重置”;表，以尝试将所有浏览器元素对齐到通用的一致样式。这与浏览器默认的UA样式无关，更多的是关于“清理”。并将所有浏览器对齐到共同的基本样式。这只是一个加法过程。

这是两个非常不同的概念，这里的人都搞混了。

因为每个浏览器通常都有默认的、开箱即用的元素和布局样式，看起来略有不同，所以人们想出了“重置”的想法。或“;reboot"样式表在应用自定义CSS之前对齐所有浏览器。例如，Bootstrap现在就是这样做的。但这与人们想要回到浏览器的默认外观无关。

问题不在于建造这些定制的“重置”;样式表，它是找出什么默认CSS是为每个浏览器和每个元素在任何样式被应用。大多数人发现，除非你“清除”，否则你无法重建一个现有的干净梯级。所有样式都已应用。但是如何回到默认的浏览器样式呢?

对于一些人来说，这意味着将元素返回到浏览器自带的UA样式表。许多人想重新设置为“initial”;属性值与浏览器的默认样式无关，但实际上是属性默认值。这是危险的，就像在&;display&;将块级元素推回“inline”;破坏表格布局和其他东西。

所以我不同意用户在这里使用“;initial"重置任何东西或自定义重置类，将每个属性更改回某个任意基值集。

对我来说，更好的解决方案一直是尝试尝试和将所有核心元素样式返回到浏览器的UA样式表值，这是我们所有最终用户都在使用的。如果你正在创建一个新的网站，你不需要这样做。您可以从浏览器的默认样式和样式开始。只有当您添加了第三方CSS产品，或者发现自己有复杂的CSS级联之后，您才会想要弄清楚如何返回到浏览器默认的样式表值。

因此，作为第一步，所有新旧浏览器都共享我赞成创造你自己的“重置”。表将所有元素重置为一种通用样式 first。这样就有了一个坚固的框架，可以更容易地恢复，而不必回到浏览器的默认设置。您只是在元素样式值的重置公共核心集上进行构建。一旦建立你自己的“重置”;一个添加而不是改变浏览器UA样式的网站，你有一个非常容易修改的网站。

剩下的唯一问题是，当你有一个网站没有这样的重置表，或有复杂的第三方CSS，需要尝试和返回浏览器的UA样式。你是怎么做到的?

我意识到Internet Explorer迫使我们手动重置每个属性，以返回任何形式的重置。但将这些房产的价值全部推回到“初始值”。完全破坏浏览器UA样式表的值!坏主意!更好的方法是简单地使用“all:revert"”对于非ie浏览器，在每个元素上使用通配符和“继承”;只有少数继承的根级属性在&;html&;和“;body"影响页面中所有继承子元素的元素。(见下文)。我不赞成使用“首字母”对属性进行大规模重置。或者回到一些我们假设所有浏览器或IE都会使用的假想标准。对于初学者"initial"在IE中的支持很差，并且不会将值重置为元素默认值，只会将属性默认值重置为元素默认值。但如果你要创建一个重置表来将所有元素对齐到一个公共样式，这也是毫无意义的。在这种情况下，清除样式并重新开始是毫无意义的。

因此，这里是我的简单解决方案，在大多数情况下，它足以重置基于文本的值，从根目录向下筛选到IE，并使用“all:revert"为所有非ie浏览器强制非继承的值完全回到浏览器的UA样式表，给你一个真正的重启。这并不妨碍在元素样式之上分层的高级类和样式，无论如何，这都应该是我们的目标。这就是为什么我不喜欢这些自定义重置类，这是乏味和不必要的，而且无论如何都不会返回元素到其浏览器UA样式。注意下面选择性稍强的选择器，例如Bootstrap的“reboot”;样式值，将它们返回到浏览器默认样式。当然，这些不会重置IE中元素的元素样式，但对于非IE浏览器和大多数可继承的文本样式，它会将大多数代理中的元素返回到浏览器自带的UA样式表:

    :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框架，它在它的reset样式表中实现了恢复。

小开

如果有人来这里寻找一个答案，利用iframe在这里

<iframe srcdoc="<html><body>your-html-here</body></html>" />

https://caniuse.com/iframe-srcdoc

小开

我正在为我的项目使用Material-Tailwind，并且正在努力删除一个元素的默认css。所以我简单地在我的jsx中添加了style=\{\{all: "revert"}}作为属性，它为我工作。


提交答案