是否有可用的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;
}
}
因此，我们可以快速删除或重新设置样式，而不必声明每个属性。
当前回答
你有没有可能在找!重要规则?它不会撤销所有声明，但它提供了一种重写它们的方法。
当在样式声明上使用!important规则时，该声明将覆盖CSS中所做的任何其他声明，无论它位于声明列表中的哪个位置。虽然，important与专一性无关。
https://developer.mozilla.org/en-US/docs/CSS/Specificity The_ !important_exception
其他回答
如果你在类中设置CSS， 你可以使用jQuery removeClass()方法轻松删除它们。 下面的代码删除了.element类:
<div class="element">source</div>
<div class="destination">destination</div>
<script>
$(".element").removeClass();
</script>
如果未指定参数，则该方法将删除 所选元素中的所有类名。
你提到了移动优先的网站……对于响应式设计，用大屏样式覆盖小屏幕样式当然是可能的。但你可能不需要这样做。
试试这个:
.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，试图覆盖一切。
我建议您评估如何根据具体情况从元素中删除样式。
比如说，为了搜索引擎优化的目的，你需要在一个没有实际标题的页面上包含一个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>
如果有人来这里寻找一个答案，利用iframe在这里
<iframe srcdoc="<html><body>your-html-here</body></html>" />
https://caniuse.com/iframe-srcdoc
如果你碰巧在构建系统中使用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()选择器作为前缀，所以这有点难看，但效果很好。
