如何仅为特定元素或选择器重置/删除 CSS 样式

Question

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

所以我们可以快速删除或重新设置样式，而无需声明每个属性。

Answer 1

all 属性就是这样做的，并且是这样工作的：

CSS：

#someselector {
  all: initial;
}

#someselector * {
  all: unset
}

SCSS：

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

• 适用于仍受支持的所有主要浏览器。在 Internet Explorer 中不起作用，如果您仍然需要维护它。

Answer 2

使用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;
  }
}

会做。

如果我们想将嵌入的小部件/组件与包含它们的页面样式隔离开来，我们可以写：

.isolated-component {
 all: revert;
}

这会将所有作者样式（即开发人员 CSS）还原为用户样式（我们网站的用户设置的样式 - 不太可能的情况）或者如果没有设置用户样式则还原为用户代理样式本身。

Answer 3

问题

您需要将标记插入到 HTML 文档中，并且它需要以特定方式显示。此外，您不拥有此文档，因此您无法更改现有的样式规则。你不知道样式表是什么可以是，或者他们可能会变成什么。

当您为未知的第 3 方网站提供可显示组件时，用例就是这样。这方面的例子是：

1. 广告代码
2. 构建插入内容的浏览器扩展
3. 任何类型的小部件

   最简单的修复

   将所有内容放在 iframe 中。这有它自己的一组限制：

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

      如果你的内容能够适合一个盒子，你可以通过让你的内容写一个 iframe 并明确设置内容来解决问题 #1，从而绕过这个问题，因为 iframe 和文档将共享同一个域。

      CSS 解决方案

      您能做的最好的事情就是显式覆盖所有可以覆盖的可能属性，并将它们覆盖为您想要的思考他们的默认值应该是。

      即使你重写，没有办法确保更有针对性的 CSS 规则不会覆盖你的.您在这里可以做的最好的事情是让您的覆盖规则尽可能具体地定位，并希望父文档不会意外地最好：在内容的父元素上使用模糊或随机 ID，并在所有属性值定义上使用 !important .

Answer 4

快速回答是使用"all:revert"

.element {
  all:revert;
}

all:revert 会将您元素上的所有样式属性重置为原始浏览器默认的 UA 样式表属性值，或父 body 元素中的任何样式。但它不会擦除样式属性，如 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" 和"unset" 的问题

您可以使用 "initial" 或 "unset" 但您必须为每个属性手动应用它们，更糟糕的是，它们不会将属性返回到每个浏览器默认 UA 样式表设置的元素默认显示值，但是"initial" 基本上会擦除元素的属性值并创建一个完全无风格元素。例如，块级元素上的“display:block”将被擦除。因为样式属性仍然需要某种默认值，所以当您使用“display:initial”时，所有带有“display”的块级和非块级元素都将更改为“display:inline”。你不希望这样做，因为它会从所选元素中完全删除你的样式和浏览器的默认 UA 元素样式。

"unset" 工作方式接近相同，但在继承的基于文本的 CSS 属性的情况下，其属性继承元素上方父级中的任何内容（可能是浏览器默认的 UA 样式或上方 HTML 父级中的任何内容），但是对于非继承属性，类似于"initial"。

我的建议是避免在 CSS 中使用 all:initial 或任何形式的 initial ，除非您试图删除无法以任何其他方式删除的单个 CSS 属性。为什么？ initial 不仅会删除您应用的样式，还会删除浏览器默认 UA 样式表应用的所有样式。 all:revert不会这样做。在使用 initial 方面，它在 Internet Explorer 中确实有更好的支持，就像它的堂兄 inherit 一样。但只有 IE8+ 能看懂initial。因此，此属性值存在很多问题。这是不可靠的。

原因CSS 以这种方式工作在浏览器应用默认用户代理样式表为所有 HTML 元素提供基本样式之前，所有 HTML 元素都没有任何样式。所有 HTML 元素实际上都没有样式，除了文本区域和按钮之类的“替换”元素外，在应用每个浏览器的默认 UA 表之前看起来都很相似。 “initial”和“unset”将从浏览器中清除大部分内容。 "revert"至少保留了用户浏览器应用的基本样式集，因此优于"initial"和"unset"。您可以在下面的链接中查看浏览器附带的所有各种默认样式表。

默认浏览器样式表列表： https://meiert.com/en/blog/user-agent-style-sheets/

现在寻求更好的解决方案

这里有两个想法被混淆了：

1. 第一个想法是将样式“返回”到浏览器的 UA 样式表值集（安装时浏览器随附的样式表，它定义了每个元素的外观）。每个浏览器都定义了自己的样式，即元素在默认情况下的外观。这个想法是关于将所有页面样式返回到每个浏览器的本机元素样式。
2. 第二个想法是将所有默认浏览器样式“重置”为所有浏览器共享的通用外观。人们构建特殊的“重置”表来尝试将所有浏览器元素普遍地对齐到共同商定的样式。这与浏览器默认的 UA 样式无关，更多的是关于“清理”并将所有浏览器对齐到一个通用的基本样式。这只是一个附加过程。

   这是两个截然不同的概念，这里的人很容易混淆。

   因为每个浏览器通常都有默认的、开箱即用的元素和看起来略有不同的布局样式，所以人们想出了“重置”或“重启”样式表的想法，以便在应用自定义 CSS 之前对齐所有浏览器。例如，Bootstrap 现在可以做到这一点。但这与人们想要返回浏览器的默认外观无关。

   问题不在于构建这些自定义“重置”样式表，而在于在应用任何样式之前确定每个浏览器和每个元素的默认 CSS 是什么。大多数人发现您无法重建现有的干净级联，直到您“清除”所有已应用的样式。但是如何恢复默认的浏览器样式呢？

   对于某些人来说，这意味着超越将元素返回到浏览器附带的浏览器 UA 样式表。许多人想重置回“初始”属性值，这与浏览器的默认样式无关，但实际上是属性默认值。这是危险的，因为在“显示”的情况下会将块级元素推回“内联”并破坏表格布局和其他内容。

   所以我不同意这里的用户使用“初始”来重置任何东西或自定义重置类将每个属性更改回某个任意基值集。

   对我来说更好的解决方案一直是尝试尝试将所有核心元素样式返回到浏览器的 UA 样式表值，这是我们所有最终用户都在使用的。如果您要创建一个新网站，则不必执行此操作。您从浏览器的默认样式和样式开始。只有在您添加了第三方 CSS 产品或发现自己拥有复杂的 CSS 级联之后，您才会想弄清楚如何返回到浏览器默认样式表值。

   为此原因，我赞成创建您自己的“重置”表以将所有元素重置为一种通用样式首先，作为第一步，所有新旧浏览器都共享它。然后，您将拥有一个可靠的框架，无需返回浏览器默认设置即可更轻松地恢复到该框架。您只是在一组重置的共同核心元素样式值上构建。一旦构建了您自己的“重置”表，一个添加而不改变浏览器 UA 样式的表，您就拥有了一个非常容易修改的站点。

   剩下的唯一问题是当您的网站没有这样的重置表，或者有复杂的第三方 CSS 并且需要尝试返回浏览器 UA 样式时。你是怎样做的？

   我意识到 Internet Explorer 也迫使我们手动重置每个属性以返回任何类型的重置。但是将这些属性值全部推回“初始”会完全破坏浏览器 UA 样式表值！馊主意！更好的方法是简单地对非 IE 浏览器在每个使用通配符的元素上使用“all:revert”，并且仅对在“html”和“body”元素中找到的少数继承的根级属性使用“inherit”影响页面中的所有继承子项。 （见下文）。我不赞成使用“初始”对属性进行这些巨大的重置，或者回到我们假设所有浏览器或 IE 都将使用的一些虚构标准。对于初学者来说，“initial”在 IE 中的支持很差，并且不会将值重置为元素默认值，只有属性默认值。但如果您要创建重置表以将所有元素对齐到通用样式，这也毫无意义。在那种情况下，清除样式并重新开始是没有意义的。

   所以这是我的简单解决方案，在大多数情况下，它足以重置从根目录筛选到 IE 的基于文本的值，并对所有非 IE 浏览器使用“all:revert”以强制将非继承值返回到浏览器的 UA样式表完全，给你一个真正的重启。这不会干扰在您的元素样式上分层的更高级别的类和样式，无论如何这应该始终是目标。这就是为什么我不喜欢这些乏味且不必要的自定义重置类，并且无论如何都不会将元素返回到其浏览器 UA 样式。请注意下面选择性更强的选择器，它们会覆盖例如 Bootstrap 的“重启”样式值，将它们返回到浏览器默认样式。当然，这些不会重置 IE 元素的元素样式，但对于非 IE 浏览器和大多数可继承的文本样式，它会将大多数代理中的元素返回到浏览器附带的 UA 样式表：

       :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;
       }
   

   您还可以使用我的免费Universal CSS Framework，它在其重置样式表中实现了还原。

Answer 5

另一种方式：

1) 包含 Yahoo CSS reset 的 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/

Answer 6

如果你碰巧在构建系统中使用 sass，一种适用于所有主流浏览器的方法是用 :not() 选择器包装你所有的样式导入，就像这样......

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

然后您可以在容器上使用禁用类，子内容将不会有您的任何样式。

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

当然，您所有的样式现在都将使用 :not() 选择器作为前缀，所以它有点乱七八糟，但效果很好。

Answer 7

我不建议使用此处已标记为正确的答案。它是一个巨大的 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>

Answer 8

在我的特定场景中，我想跳过将通用样式应用于页面的特定部分，更好地说明如下：

<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有多邪恶吧:-)）

Answer 9

如果有人来这里寻找使用iframe的答案，那就是

<iframe srcdoc="<html><body>your-html-here</body></html>" />

https://caniuse.com/iframe-srcdoc

Answer 10

您提到了移动优先网站...对于响应式设计，当然可以用大屏幕样式覆盖小屏幕样式。但你可能不需要。

尝试这个：

.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. */
    }
}

这些媒体查询不重叠，因此它们的规则不会相互覆盖。这使得单独维护每组样式变得更加容易。

Answer 11

对于那些试图弄清楚如何仅从元素中实际删除样式而不从文件中删除 css 的人，此解决方案适用于 jquery：

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

Answer 12

更好的解决方案

下载“复制/粘贴”样式表以将 css 属性重置为默认值（UA 样式）：
https://github.com/monmomo04/resetCss.git

谢谢@Milche 模式！
我真的在寻找重置/默认样式属性值。我的第一个尝试是从 root(html) 元素的浏览器开发工具复制计算值。但正如它所计算的那样，它在每个系统上看起来/工作起来都会有所不同。
对于那些在尝试使用星号 * 重置子元素的样式时遇到浏览器崩溃的人，据我所知这对您不起作用，我已将星号“*”替换为所有 HTML 标签名称.浏览器没有崩溃；我使用的是 Chrome 版本 46.0.2490.71 m。
最后，值得一提的是，这些属性会将样式重置为最顶层根元素的默认样式，但不会重置为每个 HTML 元素的初始值。所以为了纠正这个问题，我采用了基于 webkit 的浏览器的“用户代理”样式，并在“reset-this”类下实现了它。

有用的链接：

下载“复制/粘贴”样式表以将 css 属性重置为默认值（UA 样式）：
https://github.com/monmomo04/resetCss.git

用户代理风格：
Browsers' default CSS for HTML elements
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

css specificity（注意特异性）：
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

Answer 13

如果你在类中设置你的 CSS， 您可以使用 jQuery removeClass() 方法轻松删除它们。 下面的代码删除了 .element 类：

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

如果没有指定参数，该方法将删除 所选元素中的所有类名。

Answer 14

我正在为我的项目使用 Material-Tailwind，并且正在努力删除元素的默认 css。所以我只是在我的 jsx 中添加了 style={{all: "revert"}} 作为属性，它对我有用。

Answer 15

正如其他答案所提到的，CSS 属性 all 设置为值 unset 似乎在不知道哪些属性在起作用的情况下覆盖了所有 CSS 属性。但是，在 Wordpress 站点中添加自定义 CSS 时，这对我不起作用，因为 Wordpress 自定义 CSS 编辑器无法识别 all 属性，并且没有反映 Microsoft Edge 中的更改。相反，对我有用的是暴力覆盖，即识别网页元素中使用的每个属性并手动重置每个属性。识别元素使用的 CSS 属性的方法是使用网络浏览器检查元素，然后浏览“样式”选项卡。

Answer 16

您是否有机会寻找 !important 规则？它不会撤消所有声明，但它提供了一种覆盖它们的方法。

当 !important 规则用于样式声明时，此声明将覆盖 CSS 中的任何其他声明，无论它位于声明列表中的何处。虽然， !important 与特异性无关。

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