是否有可用的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;
  }
}

因此,我们可以快速删除或重新设置样式,而不必声明每个属性。


当前回答

all属性这样做,并像这样工作:

CSS:

#someselector {
  all: initial;
}

#someselector * {
  all: unset
}

SCSS:

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

适用于所有主要浏览器,仍然支持。不能在ie中工作,如果你还需要维护的话。

其他回答

你有没有可能在找!重要规则?它不会撤销所有声明,但它提供了一种重写它们的方法。

当在样式声明上使用!important规则时,该声明将覆盖CSS中所做的任何其他声明,无论它位于声明列表中的哪个位置。虽然,important与专一性无关。

https://developer.mozilla.org/en-US/docs/CSS/Specificity The_ !important_exception

另一个方法:

1)包括雅虎css重置的css代码(文件),然后把所有东西都放在这个DIV中:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2)或使用

https://cssreset.com/scripts/vanilla-css-un-reset/ https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ https://cssreset.com/scripts/eric-meyer-reset-css/ https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/ https://cssreset.com/scripts/normalize-css/

如果你碰巧在构建系统中使用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的人,这个解决方案使用jquery:

$('.selector').removeAttr('style');

这个问题

您需要将标记插入到HTML文档中,并且它需要以特定的方式显示。此外,您不拥有此文档,因此不能更改现有的样式规则。您不知道样式表可以是什么,也不知道它们可能更改为什么。

这种情况的用例是当您为未知的第三方网站提供可显示的组件时。这方面的例子有:

广告标签 构建插入内容的浏览器扩展 任何类型的小部件

简单的修理

把所有东西都放在iframe中。这有它自己的一组限制:

跨域限制:您的内容根本无法访问原始文档。您不能覆盖内容、修改DOM等。 显示限制:你的内容被锁定在一个矩形内。

如果您的内容可以放入一个框中,那么您可以通过让内容编写iframe并显式地设置内容来绕过问题#1,因为iframe和文档将共享同一个域。

CSS解决方案

最好的方法是显式地覆盖所有可以覆盖的属性,并将它们重写为您认为它们的默认值。

即使您重写了,也无法确保更有针对性的CSS规则不会重写您的规则。在这里,您能做的最好的事情是让覆盖规则目标尽可能明确,并希望父文档不会意外地优于它:在内容的父元素上使用模糊或随机的ID,并在所有属性值定义上使用!important。