我敢肯定以前必须提到/问过,但一直在寻找没有运气的年龄,我的术语一定是错的!
我依稀记得我刚才看到的一条推文,它提示有一条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;
}
}
因此,我们可以快速删除或重新设置样式,而无需声明每个属性.
说得通？
Mil*_*ern 562
CSS3关键字initial将CSS3属性设置为规范中定义的初始值.该initial关键字具有广泛的浏览器支持,IE和Opera Mini系列除外.
由于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的边框更少.
[编辑后编辑,2017年2月]投票成为现代规范,用户Joost
#reset-this-parent {
all: initial;
* {
all: unset;
}
}
W3的例子
例如,如果作者在元素上指定all:initial,它将阻止所有继承并重置所有属性,就好像级联的作者,用户或用户代理级别中没有出现规则一样.
这对于页面中包含的"窗口小部件"的根元素非常有用,它不希望继承外部页面的样式.但请注意,应用于该元素的任何"默认"样式(例如,显示:块元素上的UA样式表中的块)也将被吹走.
JAVASCRIPT？
除了css之外没有人想过重置css？是？
有完全相关的剪辑:https://stackoverflow.com/a/14791113/845310
getElementsByTagName("*")将返回DOM中的所有元素.然后,您可以为集合中的每个元素设置样式:
2013年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;
joo*_*ost 152
对于未来的读者.我认为这是意思,但目前还没有得到广泛的支持(见下文):
#someselector {
all: initial;
* {
all: unset;
}
}
JS_*_*ler 25
让我彻底回答这个问题,因为几年来它一直是我痛苦的根源,很少有人真正理解这个问题,为什么要解决这个问题很重要.如果我对CSS规范负有全部责任我坦率地说,因为在过去十年中没有解决这个问题.
问题
您需要将标记插入HTML文档,并且需要以特定方式查找.此外,您不拥有此文档,因此您无法更改现有的样式规则.您不知道样式表可能是什么,或者它们可能会改变什么.
用例是指为未知的第三方网站提供可显示的组件.这方面的例子是:
最简单的修复
将所有内容放在iframe中.这有它自己的一套限制:
如果您的内容可以放入框中,您可以通过让您的内容编写iframe并明确设置内容来解决问题#1,从而绕过问题,因为iframe和文档将共享相同的域.
CSS解决方案
为了解决这个问题,我已经进行了广泛的搜索,但遗憾的是没有.您可以做的最好的事情是显式覆盖所有可以覆盖的可能属性,并将它们覆盖到您认为其默认值应该是什么.
即使您覆盖,也无法确保更有针对性的CSS规则不会覆盖您的规则.这里你能做的最好的事情就是让你的覆盖规则尽可能具体地定位,并希望父文档不会意外地使用它:在你的内容的父元素上使用一个模糊或随机的ID,并在所有属性值定义上使用!important .
Asi*_*K T 23
这个问题找到了一个全新的解决方案.
您需要"一个可用的css规则,它将删除先前在样式表中为特定元素设置的任何样式."
因此,如果元素具有类名,例如all: revert:
例如:
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;
}
将重置由施加各种风格all: unset,remove-all-styles和其他所有继承和应用样式到other-class.
或者在你的情况下:
/* 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值.
another-class实际上
div,正如名称所示,将该属性还原为其用户或用户代理样式.
revert而当我们使用
revert与all性能,适用于所有元素的CSS属性将恢复到用户/用户代理样式.
例如:如果我们想要从包含它们的页面样式中分离嵌入式窗口小部件/组件,我们可以编写:
.isolated-component {
all: revert;
}
这将把所有revert(即开发人员CSS)还原为all(我们网站的用户设置的author styles样式- 不太可能的场景),或者如果没有设置用户样式则将样本本身还原.
更多细节:https://developer.mozilla.org/en-US/docs/Web/CSS/revert
唯一的问题是支持:user styles在撰写本文时,只有Safari 9.1和iOS Safari 9.3支持价值.
所以我会说使用这种风格并回退到任何其他答案.
T.T*_*dua 10
另一种方式:
1)包含Yahoo CSS重置的css代码(文件),然后将所有内容放入此DIV中:
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
我不建议使用此处已标记为正确的答案。它是一个巨大的 CSS 块，试图覆盖所有内容。
我建议您根据具体情况评估如何从元素中删除样式。
假设出于 SEO 目的，您需要在设计中没有实际标题的页面上包含 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>
如果您碰巧在构建系统中使用 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;
}
"all:revert"将重置元素上的所有样式属性。在文本或继承属性的情况下，"revert"将元素的 CSS 属性重置为其从“body”元素或浏览器的默认 UA 样式值继承的值，而不是属性的基本样式。对于非继承属性，它会再次将其重置为浏览器的默认样式，而不是属性的基本样式。“all”允许影响所有属性。
这很可能是您想看到的。您可以使用"initial"or"unset"但您必须为每个属性手动应用它们，更糟糕的是，它们不会将属性返回到元素的默认显示值，而是从本质上擦除元素的属性值并创建一个完全无样式的元素。例如，对于您选择使用“display:initial”设置的所有元素，“display:block”将更改为“display:inline”。您永远不想这样做，因为它会从所选元素中完全删除您的样式和浏览器的默认 UA 元素样式。它以这种方式工作的原因是所有 HTML 元素都没有任何样式，因此在应用包含所有元素样式的浏览器的 UA 表之前，大多数元素看起来都是一样的。“初始”和“未设置”会从浏览器中清除大部分内容。"revert"至少保留了用户浏览器应用的基本样式集，因此优于"initial"和"unset"。
使用问题"all:revert"：这是一个较新的 CSS 声明，仅适用于更现代的 HTML5 浏览器（自 2020 年以来）。较旧的非 HTML5 浏览器（2010 年之前）都无法理解此声明，因此它们将忽略此声明。也没有任何版本的 Internet Explorer 理解“all:revert”。只有 IE8+ 理解“初始”，所以那些旧版本不会受到影响。然而，它并不可靠，但仍然是我使用的有用工具。:)
现在寻求更好的解决方案
这里有两个想法被混淆了：
这是人们在这里混淆的两个截然不同的概念。
因为每个浏览器的默认、开箱即用元素和布局样式看起来略有不同，所以人们想出了“重置”或“重新启动”样式表的想法，以在应用自定义 CSS 之前对齐所有浏览器。例如，Bootstrap 现在就是这样做的。但这与人们想要返回浏览器的默认外观无关。
问题不在于构建这些自定义“重置”样式表，而是在应用任何样式之前弄清楚每个浏览器和每个元素的默认 CSS 是什么。大多数人发现在“清除”所有已应用的样式之前，您无法重建现有的干净级联。但是如何恢复到默认的浏览器样式？
对于某些人来说，这意味着超越将元素返回到浏览器随附的浏览器 UA 样式表。许多人想重置回“初始”属性值，这与浏览器的默认样式无关，但实际上是属性默认值。这是危险的，因为在“显示”的情况下，将块级元素推回“内联”并破坏表格布局和其他东西。
所以我不同意这里的用户使用“初始”来重置任何东西或自定义重置类，将每个属性更改回某个任意基值集。
对我来说更好的解决方案一直是尝试尝试将所有核心元素样式返回到浏览器的 UA 样式表值，无论如何我们所有的最终用户都在使用它。如果您正在创建一个新网站，则不必执行此操作。您从浏览器的默认样式开始，然后对其进行样式设置。只有在您添加了第三方 CSS 产品，或者发现自己有复杂的 CSS 级联之后，您才想要弄清楚如何返回到浏览器默认样式表值。
出于这个原因，我将创建您自己的“重置”表，首先将所有元素重置为所有新旧浏览器共享的通用样式作为第一步。然后，您将拥有一个可靠的框架，无需返回浏览器默认设置即可更轻松地恢复到该框架。您只是建立在一组重置的通用核心元素样式值上。一旦构建了您自己的“重置”表（添加而不是更改浏览器的 UA 样式），您就拥有了一个非常容易修改的站点。
剩下的唯一问题是当您的站点没有这样的重置表，或者有复杂的第三方 CSS 并且需要尝试返回到浏览器 UA 样式时。你是怎样做的？
我意识到 Internet Explorer 已经迫使我们手动重置每个属性以恢复到任何类型的重置。但是将这些属性值全部推回“初始”会完全破坏浏览器 UA 样式表值！馊主意！更好的方法是使用通配符在非 IE 浏览器的每个元素上简单地使用“all:revert”，并仅对在“html”和“body”元素中找到的少数继承的根级属性使用“继承”影响页面中的所有继承子级。（见下文）。我不是为了使用“初始”或回到一些我们假设所有浏览器或 IE 都将使用的虚构标准来进行这些巨大的属性重置。对于初学者来说，“初始”在 IE 中的支持很差，并且不会将值重置为元素默认值，只有属性默认值。但是，如果您要创建一个重置表以将所有元素与通用样式对齐，这也是毫无意义的。在这种情况下，清除样式并重新开始是没有意义的。
所以这是我的简单解决方案，在大多数情况下，它足以重置从根目录筛选到 IE 中的基于文本的值，并对所有非 IE 浏览器使用“all:revert”以强制非继承值返回到浏览器的 UA样式表完全，给你一个真正的重启。这不会干扰在元素样式上分层的更高级别的类和样式，无论如何这应该始终是目标。这就是为什么我不适合这些乏味且不必要的自定义重置类，并且无论如何都不会将元素返回到其浏览器 UA 样式。请注意下面稍微更具选择性的选择器，它们会覆盖例如 Bootstrap 的“重新启动”样式值，将它们返回到浏览器默认样式。当然，这些不会重置 IE 元素上的元素样式，
: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;
}