是否有可用的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属性设置为规范中定义的初始值。all关键字有广泛的浏览器支持，除了IE和Opera Mini家族。
/* basic modern patch */
#reset-this-root {
all: unset;
}
or
#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;
}
相关的GitHub回购与2017年12月更详尽的清单 相关的 MDN相关 相关W3C规范
综上所述，我不认为CSS重置是可行的，除非我们最终只有一个web浏览器，如果'默认'是由浏览器设置的。
其他回答
对于那些试图弄清楚如何真正从元素中删除样式，而不从文件中删除css的人，这个解决方案使用jquery:
$('.selector').removeAttr('style');
这个问题
您需要将标记插入到HTML文档中，并且它需要以特定的方式显示。此外，您不拥有此文档，因此不能更改现有的样式规则。您不知道样式表可以是什么，也不知道它们可能更改为什么。
这种情况的用例是当您为未知的第三方网站提供可显示的组件时。这方面的例子有:
广告标签 构建插入内容的浏览器扩展 任何类型的小部件
简单的修理
把所有东西都放在iframe中。这有它自己的一组限制:
跨域限制:您的内容根本无法访问原始文档。您不能覆盖内容、修改DOM等。 显示限制:你的内容被锁定在一个矩形内。
如果您的内容可以放入一个框中，那么您可以通过让内容编写iframe并显式地设置内容来绕过问题#1，因为iframe和文档将共享同一个域。
CSS解决方案
最好的方法是显式地覆盖所有可以覆盖的属性，并将它们重写为您认为它们的默认值。
即使您重写了，也无法确保更有针对性的CSS规则不会重写您的规则。在这里，您能做的最好的事情是让覆盖规则目标尽可能明确，并希望父文档不会意外地优于它:在内容的父元素上使用模糊或随机的ID，并在所有属性值定义上使用!important。
在我的特定场景中，我想跳过对页面的特定部分应用通用样式，更好地说明如下:
<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是多么的邪恶:-))
另一个方法:
1)包括雅虎css重置的css代码(文件)，然后把所有东西都放在这个DIV中:
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2)或使用
https://cssreset.com/scripts/vanilla-css-un-reset/ https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ https://cssreset.com/scripts/eric-meyer-reset-css/ https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/ https://cssreset.com/scripts/normalize-css/
使用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;
}
这将重置由其他类、另一个类和所有其他继承和应用到该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;
}
它将把所有作者样式(即开发人员CSS)还原为用户样式(我们网站的用户设置的样式-不太可能的场景)，或者如果没有设置用户样式，则还原为用户代理本身的样式。
