仅重置/移除元素的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 (eg 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; } }
- 属性来源
- 有关
- 与MDN相关
- 相关的W3C规范
正如在@ user566245的评论中提到的那样：
原则上这是正确的，但个人里程可能会有所不同。 例如默认情况下textarea等某些元素具有边框，应用此重置将使这些textarea的边框更less。
[POST编辑FEB 4，'17] Upvoted成为现代规范，用户Joost
#reset-this-parent { all: initial; * { all: unset; } }
以W3为例
例如，如果作者在元素上指定了all：initial，则将阻止所有inheritance并重置所有属性，就好像没有在级联的作者，用户或用户代理级别中出现的规则一样。
这对页面中包含的“小部件”的根元素很有用，它不希望inheritance外部页面的样式。 但是，请注意，应用于该元素的任何“默认”样式（例如，块元素上的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重置是可行的，除非我们最终只有一个networking浏览器..如果'默认'是由浏览器设置。
为了比较，这里是一个<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; } }
- （ 来源 ）支持：Chrome 37，Firefox 27，IE 11，Opera 24
- 不支持：Safari
让我来回答这个问题，因为这个问题对我来说已经有好几年了，很less有人真正理解这个问题，为什么这个问题很重要。 坦率地说，如果我对CSS规范负有责任，我会感到尴尬的，因为在过去的十年中没有解决这个问题。
问题
您需要将标记插入到HTML文档中，并且需要查看特定方式。 此外，你不拥有这个文件，所以你不能改变现有的风格规则。 你不知道样式表可能是什么，或者他们可能会改变什么。
使用情况是当您为未知的第三方网站提供可显示的组件时使用。 这样的例子是：
- 一个广告代码
- build立一个插入内容的浏览器扩展
- 任何types的小部件
最简单的修复
把一切都放在一个iframe中。 这有它自己的一套限制：
- 跨域限制：您的内容根本无法访问原始文档。 你不能覆盖内容，修改DOM等。
- 显示限制：您的内容被locking在矩形内。
如果你的内容可以放在一个盒子里，你可以通过让你的内容写一个iframe并明确地设置内容来解决问题＃1，因此iframe和文档将共享相同的域。
CSS解决scheme
我已经search到了这个解决scheme，但不幸的是没有。 你可以做的最好的是明确地覆盖所有可能被覆盖的属性，并将它们覆盖到你认为他们的默认值应该是。
即使你重写， 也没有办法确保更有针对性的CSS规则不会覆盖你的 。 您可以在这里做的最好的是让您的覆盖规则的目标尽可能具体，并希望父文件不会意外最好：在您的内容的父元素上使用一个模糊或随机的ID，并使用！重要的所有属性值定义。
有一个全新的解决scheme发现这个问题。
您需要“一个可用的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以及所有其他inheritance和应用样式应用的样式重置为该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值。
revert事实上，正如名称所述，还原属性为用户或用户代理风格。
all而当我们使用
all属性revert时，应用于该元素的所有CSS属性将被还原为用户/用户代理样式。
点击此处了解作者，用户，用户代理风格的区别。
例如：如果我们想从包含它们的页面样式中分离出embedded的小部件/组件 ，我们可以这样写：
.isolated-component { all: revert; }
这将会把所有的author styles （即开发人员CSS）还原为user styles （我们网站用户设置的风格 – 较less的机会场景），或者如果没有用户风格设置，则用户user-agent风格本身。
更多细节在这里： https : //developer.mozilla.org/en-US/docs/Web/CSS/revert
唯一的问题是支持 ：在编写本文时，只有Safari 9.1和iOS Safari 9.3支持revert值。
所以我会说使用这种风格，并回退到任何其他的答案。
另一种方式：
1）包括雅虎CSS重置的CSS代码（文件），然后把所有的东西放在这个DIV：
<div class="yui3-cssreset"> <!-- Anything here would be reset--> </div>
我不build议使用在这里被标记为正确的答案。 这是一个CSS的巨大的一块，试图涵盖一切。
我build议您评估如何从每个案例的元素中删除样式。
让我们说SEO的目的，你需要包括一个H1在devise中没有实际的标题的页面。 您可能希望将该页面的导航链接设置为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; }
现在，您需要指出适用于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; font-family: 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; }
这是更清洁，不只是随机blob代码到你的CSS，你不知道它在做什么。
现在你可以添加这个类到你的h1
<h1 class="no-style-h1"> Title </h1>
你提到的移动优先网站…对于一个响应式的devise，当然可以用大屏幕风格覆盖小屏幕的风格。 但是你可能不需要。
尝试这个：
.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，这个解决scheme与jQuery的工作：
$('.selector').removeAttr('style');
如果您在类中设置了CSS，则可以使用jQuery removeClass（）方法轻松删除它们。 下面的代码删除.element类：
<div class="element">source</div> <div class="destination">destination</div> <script> $(".element").removeClass(); </script>
如果未指定参数，则此方法将从所选元素中删除所有类名称。
有没有机会find！重要规则？ 它不会撤消所有的声明，但它提供了一种方法来覆盖它们。
“当样式声明中使用！重要的规则时，这个声明将覆盖CSS中的任何其他声明，无论它在声明列表中的哪个位置，尽pipe！important与特定性无关。
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception
更好的解决scheme
下载“复制/粘贴”样式表将CSS属性重置为默认值（UA样式）：
https://github.com/monmomo04/resetCss.git
谢谢@ Milche Patern！
我真的正在寻找重置/默认样式属性值。 我第一次尝试从根（html）元素的浏览器开发工具复制计算的值。 但是，正如它计算的那样，它在每个系统上看起来都不一样。
对于那些在尝试使用星号*来重置子元素样式时遇到浏览器崩溃的人，而且我知道它不适用于您，所以我用所有的HTML标签名replace了星号“*” 。 浏览器没有崩溃; 我在Chrome版本46.0.2490.71米。
最后，最好提一下，这些属性会将样式重置为最高级根元素的默认样式，而不是每个HTML元素的初始值。 所以为了纠正这个问题，我采用了基于webkit的浏览器的“用户代理”风格，并在“reset-this”类下实现。
有用的链接：
下载“复制/粘贴”样式表将CSS属性重置为默认值（UA样式）：
https://github.com/monmomo04/resetCss.git
用户代理风格：
浏览器的HTML元素的默认CSS
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Css特性（注意特殊性）：
https://css-tricks.com/specifics-on-css-specificity/
不，这只是一个更好地pipe理你的CSS结构的问题。
在你的情况下，我会命令我的CSS是这样的：
.element, .element1, .element2 p{z-index: 50; display: block} .element, .element1{margin: 0 10} .element2 p{transform: translate3d(0, 0, 0)} @media only screen and (min-width: 980px) { .element, .element1, .element2 p{display: none} }
只是试验。
