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浏览器，如果'默认'是由浏览器设置的。

快速的回答是使用“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框架，它在它的重置样式表中实现了恢复。

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

试试这个:

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

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

更好的解决方案

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