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

试试这个:

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

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

这个问题

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

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

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

简单的修理

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

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

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

CSS解决方案

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

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

更好的解决方案

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

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

当在样式声明上使用!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浏览器，如果'默认'是由浏览器设置的。

使用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)还原为用户样式(我们网站的用户设置的样式-不太可能的场景)，或者如果没有设置用户样式，则还原为用户代理本身的样式。