我敢肯定这一定已经被提到/问过，但一直在寻找一个没有运气的时代，我的术语一定是错误的！
我依稀记得我不久前看到的一条推文，它暗示有一个可用的 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;
}
}
因此，我们可以快速删除或重新设置样式，而无需声明每个属性。
说得通？
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 中的所有元素。然后您可以为集合中的每个元素设置样式：
由 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重置是可行的，除非我们最终只有一个网络浏览器..如果浏览器最终设置了“默认”。
为了比较，这里是 Firefox 40.0 值列表，用于
<blockquote style="all: unset;font-style: oblique">触发font-style: obliqueDOM 操作。
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;
对于未来的读者。我认为这就是它的意思，但目前并没有得到广泛的支持（见下文）：
CSS：
#someselector {
all: initial;
}
#someselector * {
all: unset
}
SCSS：
#someselector {
all: initial;
* {
all: unset;
}
}
有一个全新的解决方案来解决这个问题。
使用all: revert或all: unset。
来自 MDN：
在许多情况下，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 值。
revert实际上
revert，顾名思义，将该属性恢复为其用户或用户代理样式。
all当我们使用
revert该all属性时，应用于该元素的所有 CSS 属性都将恢复为用户/用户代理样式。
例如：如果我们想将嵌入的小部件/组件与包含它们的页面样式隔离开来，我们可以这样写：
.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 规范负责，坦率地说，我会因为在过去十年中没有解决这个问题而感到尴尬。
问题
您需要在 HTML 文档中插入标记，并且它需要以特定的方式呈现。此外，您不拥有此文档，因此您无法更改现有样式规则。您不知道样式表可能是什么，或者它们可能会变成什么。
用例是当您为未知的 3rd 方网站提供可显示的组件以供使用时。这方面的例子是：
最简单的修复
将所有内容放在 iframe 中。这有它自己的一组限制：
如果您的内容可以放入一个盒子中，您可以通过让您的内容编写 iframe 并明确设置内容来解决问题 #1，从而绕过该问题，因为 iframe 和文档将共享同一个域。
CSS 解决方案
我已经广泛搜索了这个问题的解决方案，但不幸的是没有。您可以做的最好的事情是显式覆盖所有可能被覆盖的属性，并将它们覆盖为您认为它们的默认值应该是什么。
即使您覆盖，也无法确保更有针对性的 CSS 规则不会覆盖您的 . 您可以在这里做的最好的事情是让您的覆盖规则目标尽可能具体，并希望父文档不会意外地达到最佳效果：在内容的父元素上使用模糊或随机 ID，并在所有属性值定义上使用 !important .
快速的答案是使用"all:revert"
.element {
all:revert;
}
all:revert会将元素上的所有样式属性重置为原始浏览器默认的 UA 样式表属性值。但它不会像ERASE这样的样式属性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"
您可以使用"initial"，"unset"但您必须为每个属性手动应用它们，更糟糕的是，它们不会将属性返回到每个浏览器的默认 UA 样式表设置的元素默认显示值，但"initial"实际上会删除元素的属性值并创建一个完全没有样式的元素。例如，块级元素上的“display:block”将被擦除。因为 style 属性仍然需要某种默认值，所以当你使用“display:initial”时，所有带有“display”的块级和非块级元素都将更改为“display:inline”。您永远不想这样做，因为它会完全从所选元素中删除您的样式和浏览器的默认 UA 元素样式。
我的建议是避免使用CSSall:initial或任何形式的initialCSS，除非您尝试删除无法以任何其他方式删除的单个 CSS 属性。为什么？initial不仅会删除您应用的样式，还会删除浏览器默认 UA 样式表应用的所有样式。all:revert不会这样做。在使用方面initial，它确实在 Internet Explorer 中得到了更好的支持，它的堂兄inherit. 但只有 IE8+ 能理解initial。因此，此属性值存在广泛的问题。它不可靠。
CSS 以这种方式工作的原因是所有 HTML 元素都没有任何样式，直到浏览器应用默认的用户代理样式表，该样式表为所有 HTML 元素提供基本样式。所有的 HTML 元素实际上都没有样式，除了文本区域和按钮之类的“替换”元素之外，在应用每个浏览器的默认 UA 表之前，它们看起来都是一样的。“初始”和“未设置”将从浏览器中删除大部分内容。"revert"至少保留了用户浏览器应用的基本样式集，因此优于"initial"and "unset"。您可以在下面的链接中查看浏览器附带的所有各种默认样式表。
默认浏览器样式表列表： https ://meiert.com/en/blog/user-agent-style-sheets/
现在寻求更好的解决方案
这里有两个想法被混淆：
这是两个非常不同的概念，人们在这里感到困惑。
因为每个浏览器通常都有默认的、开箱即用的元素和看起来略有不同的布局样式，所以人们想出了“重置”或“重启”样式表的想法，以便在应用自定义 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;
}
另一种方式：
1）包括Yahoo CSS重置的css代码（文件），然后将所有内容放入此DIV：
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2）或使用
如果您碰巧在构建系统中使用 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() 选择器，所以它有点难看，但效果很好。
我不建议使用此处标记为正确的答案。它是一个巨大的 CSS 块，它试图涵盖所有内容。
我建议您根据具体情况评估如何从元素中删除样式。
假设出于 SEO 目的，您需要在设计中没有实际标题的页面上包含 H1。您可能希望将该页面的导航链接设为 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;
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>
更好的解决方案
下载“复制/粘贴”样式表以将 css 属性重置为默认值（UA 样式）：
https ://github.com/monmomo04/resetCss.git
谢谢@Milche Patern！
我真的在寻找重置/默认样式属性值。我的第一次尝试是从根（html）元素的浏览器开发工具中复制计算值。但正如它计算的那样，它在每个系统上看起来/工作起来都会不同。
对于那些在尝试使用星号 * 重置子元素的样式时遇到浏览器崩溃的人，并且我知道它对您不起作用，我已将星号“*”替换为所有 HTML 标签名称. 浏览器没有崩溃；我使用的是 Chrome 版本 46.0.2490.71 m。
最后，值得一提的是，这些属性会将样式重置为最顶层根元素的默认样式，但不会重置为每个 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/
您提到了移动优先网站...对于响应式设计，当然可以用大屏幕样式覆盖小屏幕样式。但你可能不需要。
试试这个：
.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. */
}
}
这些媒体查询不会重叠，因此它们的规则不会相互覆盖。这使得单独维护每组样式变得更加容易。
在我的特定场景中，我想跳过将常用样式应用于页面的特定部分，更好地说明如下：
<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 是多么邪恶 :-)）
对于那些试图弄清楚如何仅从元素中实际删除样式而不从文件中删除 css 的人，此解决方案适用于 jquery：
$('.selector').removeAttr('style');
如果您在类中设置 CSS，您可以使用 jQuery removeClass() 方法轻松删除它们。下面的代码删除了 .element 类：
<div class="element">source</div>
<div class="destination">destination</div>
<script>
$(".element").removeClass();
</script>
如果未指定参数，此方法将从所选元素中删除所有类名。
如果有人来这里寻找使用iframe这里的答案，那就是
<iframe srcdoc="<html><body>your-html-here</body></html>" />
您正在寻找 !important 规则吗？它不会撤消所有声明，但它提供了一种覆盖它们的方法。
“当在样式声明中使用 !important 规则时，该声明将覆盖 CSS 中的任何其他声明，无论它在声明列表中的什么位置。尽管，!important 与特异性无关。”
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception