仅重置/移除元素的CSS样式
我确信这件事一定是之前提到/询问过的，但一直在寻找一个没有运气的年龄，我的术语一定是错的！
我隐约记得前段时间看到的一条推文，表明存在一条css规则，可以删除样式表中以前为特定元素设置的任何样式。
一个很好的使用示例可能在移动优先RWD网站中，其中用于小屏幕视图中特定元素的大部分样式需要在桌面视图中“重置”或删除相同元素。
一个css规则可以实现类似于：
.element {
all: none;
}
Eaxmple用法：
/* 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;
}
}
因此，我们可以快速删除或重新设置样式，而无需声明每个属性。
合理？
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的边框。
[POST编辑FEB 4，'17] Upvoted成为现代规范，用户Joost
#reset-this-parent {
all: initial;
* {
all: unset;
}
}
以W3为例
例如，如果作者在元素上指定all：initial，则会阻止所有继承并重置所有属性，就好像级联的作者级别，用户级别或用户代理级别中没有出现任何规则。
这对页面中包含的“小部件”的根元素很有用，该元素不希望继承外部页面的样式。 但是，请注意，应用于该元素的任何“默认”样式（例如，来自诸如块元素的UA样式表的display：block）也将被吹走。
JAVASCRIPT？
没有人想过除了CSS重置CSS？ 是？
这个剪辑完全相关：https://stackoverflow.com/a/14791113/845310
getElementsByTagName（“*”）将返回DOM中的所有元素。 然后，您可以为集合中的每个元素设置样式：
由VisioN 2013年2月9日在20:15回答
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}
说完这一切， 我不认为一个CSS重置是可行的，除非我们最终只有一个网络浏览器..如果'默认'是由浏览器设置。
作为比较，这里是一个<blockquote style="all: unset;font-style: oblique"> Firefox 40.0值列表，其中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;
为未来的读者。 我认为这是什么意思，但目前并没有得到广泛的支持（见下文）：
#someselector {
all: initial;
* {
all: unset;
}
}
让我彻底回答这个问题，因为多年来这一直是我的痛苦之源，很少有人真正理解这个问题，为什么解决这个问题很重要。 坦率地说，如果我对CSS规范负责，我会感到尴尬，因为在过去的十年中没有解决这个问题。
问题
您需要将标记插入到HTML文档中，并且需要查看特定方式。 此外，您不拥有此文档，因此您无法更改现有样式规则。 你不知道样式表可能是什么，或者他们可能会改变什么。
用例就是当您为未知的第三方网站提供可显示的组件时使用。 这方面的例子是：
最简单的修复
将所有内容放在iframe中。 这有它自己的一套限制：
如果你的内容可以放在一个盒子里，你可以通过让你的内容编写一个iframe并明确地设置内容来避开问题＃1，因此iframe和文档将共享相同的域名。
CSS解决方案
我已经为此寻求解决方案，但遗憾的是没有。 你可以做的最好的是明确地覆盖所有可能被覆盖的属性，并将它们覆盖到你认为他们的默认值应该是。
即使你重写，也没有办法确保更有针对性的CSS规则不会覆盖你的。 您可以在这里做的最好的做法是尽可能专门针对您的覆盖规则，并希望父文档不会意外最佳：在内容的父元素上使用模糊或随机的ID，并对所有属性值定义使用！important 。
链接地址: http://www.djcxy.com/p/66075.html