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

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

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

CSS属性all有一个关键字initial，它将CSS属性设置为规范中定义的初始值。all关键字有广泛的浏览器支持，除了IE和Opera Mini家族。

/* basic modern patch */

#reset-this-root {
    all: unset;
}

or

#reset-this-root {
    all: 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;
}

相关的GitHub回购与2017年12月更详尽的清单 相关的 MDN相关 相关W3C规范

综上所述，我不认为CSS重置是可行的，除非我们最终只有一个web浏览器，如果'默认'是由浏览器设置的。

另一个方法:

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/

这个问题

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

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

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

简单的修理

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

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

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

CSS解决方案

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

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

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

CSS:

#someselector {
  all: initial;
}

#someselector * {
  all: unset
}

SCSS:

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

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

更好的解决方案

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

Thanks@Milche Patern! I was really looking for reset/default style properties value. My first try was to copy the computed value from the browser Dev tool of the root(html) element. But as it computed, it would have looked/worked different on every system. For those who encounter a browser crash when trying to use the asterisk * to reset the style of the children elements, and as I knew it didn't work for you, I have replaced the asterisk "*" with all the HTML tags name instead. The browser didn't crash; I am on Chrome Version 46.0.2490.71 m. At last, it's good to mention that those properties will reset the style to the default style of topest root element but not to the initial value for each HTML element. ‎So to correct this, I have taken the "user-agent" styles of webkit based browser and implemented it under the "reset-this" class.

下载“复制/粘贴”样式表，将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/

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

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

试试这个:

.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的人，这个解决方案使用jquery:

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

使用all: revert或all: unset。

中数:

在许多情况下，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;
  }

这将重置由其他类、另一个类和所有其他继承和应用到该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)还原为用户样式(我们网站的用户设置的样式-不太可能的场景)，或者如果没有设置用户样式，则还原为用户代理本身的样式。

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

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

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

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

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

<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是多么的邪恶:-))

如果你碰巧在构建系统中使用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()选择器作为前缀，所以这有点难看，但效果很好。

快速的回答是使用“all:revert”

.element {
  all:revert;
}

all:revert会将元素上的所有样式属性重置回原始的浏览器默认UA样式表属性值，或者父元素体中的任何样式。但它不会像initial那样ERASE样式属性，将它们返回到完全无样式的状态。

在文本或继承属性的情况下，“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”的问题

You can use "initial" or "unset" but you have to manually apply them for each property, and what is even worse, they will not return properties to the element's default display values as set by each browser's default UA style sheet, but "initial" will essentially erase the element's property values and create a completely unstyled element. For example, "display:block" on block level elements will be erased. Because the style property still needs a default value of some kind all block and non-block level elements with "display" will be changed to "display:inline" when you use "display:initial". You do not want to ever do this as it erases your styles AND the browser's default UA element styles from the selected element completely.

“unset”工作接近于相同，但在继承基于文本的CSS属性的情况下，它的属性继承了元素上面的父元素中的任何东西(可能是浏览器默认的UA样式或上面的HTML父元素中的任何东西)，但对于非继承的属性则像“initial”一样工作。

My recommendation is AVOID using all:initial or any form of initial in CSS unless you are trying to erase an individual CSS property you cannot erase in any other way. Why? initial erases not just the styles you applied but all styles the browsers default UA style sheet applied. all:revert will not do this. In terms of using initial, it does have better support in Internet Explorer, as does its cousin, inherit. But only IE8+ understands initial. So, there are a wide range of problems with this property value. It is not reliable.

The reason CSS works this way is all HTML elements come without any styling until the browser applies a default user-agent style sheet that gives all the HTML elements a base style. All HTML elements really have NO STYLES, and other than "replaced" elements like textarea and buttons, look alike until each browser's default UA sheet is applied. "initial" and "unset" would wipe away most of that from the browser. "revert" at least preserves their basic style set applied by the user's browser, and is therefore superior to "initial" and "unset". You can review all the various default style sheets that come with browsers in the link below.

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

现在有一个更好的解决方案

这里有两个概念被混淆了:

The first idea is about "returning" styles back to a browser's UA style sheet value set (the style sheet that comes with the browser on install that defines what each element looks like). Each browser defines its own styles as to how elements should look by default. This idea is about returning all page styles back to each browsers native element styles. The second idea is about "resetting" all default browser styles to a common look and feel shared by all browsers. People build special "reset" sheets to try and align all the browser elements to a common agreed on style, universally. This has nothing to do with a browsers default UA styles and more about "cleaning up" and aligning all browsers to a common base style. This is an additive process only.

这是两个非常不同的概念，这里的人都搞混了。

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

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

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

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

A better solution to me has always been to attempt to try and return all core element styling back to the browser's UA style sheet values, which is what all our end-users are using anyway. If you are creating a new website, you don't have to do this. You start with the browser's default styles and style over them. Its only after you've added third-party CSS products, or found yourself with complicated CSS cascades, that you want to figure out how to return to the browser default style sheet values.

出于这个原因，我支持创建自己的“重置”表，首先将所有元素重置为所有新老浏览器共享的一种通用样式，作为第一步。这样就有了一个坚固的框架，可以更容易地恢复，而不必回到浏览器的默认设置。您只是在元素样式值的重置公共核心集上进行构建。一旦建立了自己的“重置”表，一个添加而不是改变浏览器UA样式的表，你就有了一个非常容易修改的网站。

剩下的唯一问题是，当你有一个网站没有这样的重置表，或有复杂的第三方CSS，需要尝试和返回浏览器的UA样式。你是怎么做到的?

I realize Internet Explorer has forced us too manually reset every property to get back to any sort of reset. But pushing those property values all back to "initial" destroys the browser UA style sheet values completely! BAD IDEA! A better way is to simply use "all:revert" for non-IE browsers on every element using a wildcard, and "inherit" only for a handful of inherited root-level properties found in the "html" and "body" elements that affect all inheriting children in the page. (see below). I'm NOT for these huge resets of properties using "initial" or going back to some imaginary standard we assume all browsers or IE will use. For starters "initial" has poor support in IE and doesn't reset values to element defaults, only property defaults. But its also pointless if you are going to create a reset sheet to align all elements to a common style. In that case its pointless to clear out styles and start over.

So here is my simple solution that in most cases does enough to reset what text-based values sift down into IE from the root and use "all:revert" for all non-IE browsers to force non-inherited values back to the browser's UA style sheet completely, giving you a true restart. This does not interfere with higher level classes and styles layered over your element styles, which should always be the goal anyway. Its why I'm NOT for these custom reset classes which is tedious and unnecessary and doesn't return the element to its browser UA style anyway. Notice the slightly more selective selectors below which would write over, for example, Bootstrap's "reboot" style values, returning them to the browser default styles. These would not reset element styles on elements for IE, of course, but for non-IE browsers and most inheritable text styling it would return elements in most agents to the UA style sheets that come with browsers:

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

你也可以使用我的免费通用CSS框架，它在它的重置样式表中实现了恢复。

如果有人来这里寻找一个答案，利用iframe在这里

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

https://caniuse.com/iframe-srcdoc

我正在为我的项目使用Material-Tailwind，并且正在努力删除一个元素的默认css。所以我简单地添加了style={{all: "revert"}}作为我的jsx的属性，它为我工作。

As other answers have mentioned, the CSS property all set to the value unset seems to override all CSS properties without knowing which properties are in play. However, this did not work for me while adding custom CSS in a Wordpress site, as the all property was not recognized by the Wordpress custom CSS editor, and did not reflect changes in Microsoft Edge. Instead, what worked for me was a brute-force override, that is, to identify every property used in the webpage element and manually reset each one of them. The way to identify the CSS properties being used by an element is to inspect the element with your web browser, and go through the 'Styles' tab.