仅为元素重置/移除CSS样式

I'm sure this must have been mentioned/asked before but have been searching for an age with no luck, my terminology must be wrong!

我肯定这一定是被提到过/问过，但一直在寻找一个没有运气的年龄，我的术语一定是错的!

I vaguely remember a tweet I saw a while ago that suggested there was a css rule available that would remove any styles previously set in the stylesheet for a particular element.

我模糊地记得我刚才看到的一条tweet，它建议有一个css规则可用，它可以删除样式表中为特定元素设置的任何样式。

A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs 'resetting' or removing for the same element in the desktop view.

一个很好的使用示例可能是在移动优先RWD站点中，在这个站点中，用于小屏幕视图中的特定元素的大部分样式都需要对桌面视图中的相同元素进行“重置”或删除。

A css rule that could achieve something like:

css规则可以实现以下目标:

.element {
  all: none;
}

Eaxmple usage:

Eaxmple用法:

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

So we could quickly remove or re-set styling without having to declare every property.

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

Make sense?

有意义吗?

13 个解决方案

#1

The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.

CSS3关键字initial将CSS3属性设置为spec中定义的初始值。除了IE和Opera Mini系列之外，该关键字具有广泛的浏览器支持。

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

由于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;
}

/* basic modern patch */

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

• Source of properties
• 源的属性
• Related
• 相关的
• Related from MDN
• 从MDN相关
• Related W3C specs
• 有关W3C规范

As mentioned in a comment by @user566245 :

@user566245在评论中提到:

this is correct in principle, but individual mileage may vary. For example certain elements like textarea by default have a border, applying this reset will render those textarea's border less.

这在原则上是正确的，但是个人里程可能不同。例如，默认情况下，诸如textarea之类的某些元素有一个边框，应用此重置将使textarea的边框减少。

[POST EDIT FEB 4, '17] Upvoted for becoming a modern norm, user Joost

[发表编辑2月4日，'17 ']用户Joost投票赞成成为现代规范

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

EXAMPLE FROM W3

W3的例子

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

例如，如果作者在元素上指定all: initial，它将阻塞所有继承并重置所有属性，就好像在级联的author、user或user-agent级别中没有出现规则一样。

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as ) will also be blown away.

这对于包含在页面中的“小部件”的根元素非常有用，它不希望继承外部页面的样式。但是，请注意，应用于该元素的任何“默认”样式(例如，display: block from the UA style sheet on the block element，例如)也将被删除。

---

JAVASCRIPT ?

JAVASCRIPT ?

Nobody thought about other than css to reset css? Yes?

除了css，没有人想过要重置css吗?是吗?

There is that snip fully relevant : https://*.com/a/14791113/845310

这里有一个完全相关的snip: https://*.com/a/14791113/845310。

getElementsByTagName("*") will return all elements from DOM. Then you may set styles for each element in the collection:

getElementsByTagName(“*”)将从DOM返回所有元素。然后您可以为集合中的每个元素设置样式:

answered Feb 9 '13 at 20:15 by VisioN

1:13 2月9日20:15由异象回答

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

---

With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.

这一切说;我不认为css重置是可以实现的，除非我们只有一个浏览器。如果“默认”是由浏览器在最后设置的。

For comparison, here is Firefox 40.0 values list for a <blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.

相比之下，这里是Firefox 40.0值列表，用于

，其中字体风格:倾斜触发DOM操作。

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

#2

For future readers. I think this is what was meant but currently isn't really wide supported (see below):

为未来的读者。我认为这就是我的意思，但目前并没有得到广泛的支持(见下文):

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

• Supported in (source): Chrome 37, Firefox 27, IE 11, Opera 24
• 支持(源代码):Chrome 37, Firefox 27, IE 11, Opera 24
• Not supported: Safari
• 不支持:狩猎

#3

Let me answer this question thoroughly, because it's been a source of pain for me for several years and very few people really understand the problem and why it's important for it to be solved. If I were at all responsible for the CSS spec I'd be embarrassed, frankly, for having not addressed this in the last decade.

让我彻底地回答这个问题，因为它已经让我痛苦了好几年，很少有人真正理解这个问题，也很少有人真正理解为什么要解决这个问题。坦白地说，如果我要对CSS规范负责的话，我将会因为在过去的十年里没有解决这个问题而感到尴尬。

The Problem

这个问题

You need to insert markup into an HTML document, and it needs to look a specific way. Furthermore, you do not own this document, so you cannot change existing style rules. You have no idea what the style sheets could be, or what they may change to.

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

Use cases for this are when you are providing a displayable component for unknown 3rd party websites to use. Examples of this would be:

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

1. An ad tag
2. 一个广告标签
3. Building a browser extension that inserts content
4. 构建插入内容的浏览器扩展
5. Any type of widget
6. 任何类型的部件

Simplest Fix

简单的修理

Put everything in an iframe. This has it's own set of limitations:

把所有东西都放到iframe中。这有它自己的局限性:

1. Cross Domain limitations: Your content will not have access to the original document at all. You cannot overlay content, modify the DOM, etc.
2. 跨域限制:您的内容将完全不能访问原始文档。不能覆盖内容、修改DOM等等。
3. Display Limitations: Your content is locked inside of a rectangle.
4. 显示限制:您的内容被锁定在一个矩形内。

If your content can fit into a box, you can get around problem #1 by having your content write an iframe and explicitly set the content, thus skirting around the issue, since the iframe and document will share the same domain.

如果你的内容可以放在一个盒子里，你可以通过让你的内容写一个iframe并显式地设置内容来绕过问题，因为iframe和document将共享相同的域。

CSS Solution

CSS解决方案

I've search far and wide for the solution to this, but there are unfortunately none. The best you can do is explicitly override all possible properties that can be overridden, and override them to what you think their default value should be.

我已经到处寻找解决这个问题的办法，但不幸的是没有。您能做的最好的事情是显式地覆盖所有可能被覆盖的属性，并将它们覆盖到您认为它们的默认值应该是什么。

Even when you override, there is no way to ensure a more targeted CSS rule won't override yours. The best you can do here is to have your override rules target as specifically as possible and hope the parent document doesn't accidentally best it: use an obscure or random ID on your content's parent element, and use !important on all property value definitions.

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

#4

There's a brand new solution found to this problem.

这个问题有一个全新的解决办法。

You need "A css rule available that would remove any styles previously set in the stylesheet for a particular element."

您需要“一个css规则，它可以删除样式表中为特定元素设置的任何样式。”

So, if the element have a class name like remove-all-styles:

因此，如果元素有一个类名，比如remove-all-styles:

Eg:

例如:

HTML:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

With CSS:

用CSS:

  .remove-all-styles {
    all: revert;
  }

Will reset all styles applied by other-class, another-class and all other inherited and applied styles to that div.

将重置由其他类、其他类和所有其他继承和应用的样式到该div的所有样式。

Or in your case:

或者在你的情况中:

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

Will do.

会做的事情。

Here we used one cool CSS property with another cool CSS value.

这里我们使用了一个很酷的CSS属性和另一个很酷的CSS值。

1. revert
2. 回复

Actually revert is, as the name says, reverts that property to it's user or user-agent style.

实际上，“恢复”是，顾名思义，将该属性恢复为用户或用户代理样式。

2. all
3. 所有

And when we use revert with the all property, all CSS properties applied to that element will be reverted to user/user-agent styles.

当我们使用“all”属性时，应用到该元素的所有CSS属性都将返回到用户/用户代理样式。

Click here to know difference between author, user, user-agent styles.

点击这里了解作者、用户和用户代理风格之间的差异。

For ex: if we want to isolate embedded widgets/components from the styles of the page that contains them, we could write:

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

.isolated-component {
 all: revert;
}

Which will reverts all author styles (ie developer CSS) to user styles (styles which a user of our website set - less chance scenario) or to user-agent styles itself if no user styles set.

这将把所有的作者风格(即开发人员的CSS)转变为用户风格(我们的网站的用户设置的风格是不太可能的)或者用户代理风格本身，如果没有用户风格设置。

More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

更多细节在这里:https://developer.mozilla.org/en-US/docs/Web/CSS/revert

And only issue is the support: only Safari 9.1 and iOS Safari 9.3 have support for revert value at the time of writing.

唯一的问题是支持:在编写本文时，只有Safari 9.1和iOS Safari 9.3支持恢复值。

So I'll say use this style and fallback to any other answers.

所以我会说，使用这个样式然后回到其他答案。

#5

another ways:

另一个方法:

1) include the css code(file) of Yahoo CSS reset and then put everything inside this DIV:

1)包含雅虎css重置的css代码(文件)，然后将所有内容放入此DIV:

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

2) or use http://www.cssreset.com

2)或者使用http://www.cssreset.com

#6

I do not recommend using the answer that has been marked as correct here. It is a huge blob of CSS which tries to cover everything.

我不建议使用这里标记为正确的答案。它是一个巨大的CSS，试图覆盖所有东西。

I would suggest that you evaluate how to remove the style from an element on a per case basis.

我建议您评估如何在每个案例基础上从元素中移除样式。

Lets say for SEO purposes you need to include an H1 on a page which has no actual heading in the design. You might want to make the nav link of that page an H1 but ofcourse you do not want that navigation link to display as a giant H1 on the page.

为了搜索引擎优化的目的，你需要在页面中包含一个没有实际标题的H1。你可能想把页面的nav链接设为H1，但你当然不希望那个导航链接显示为页面上的一个巨大的H1。

What you should do is wrap that element in an h1 tag and inspect it. See what CSS styles are being applied specifically to the h1 element.

您应该做的是将该元素封装到h1标签中并进行检查。查看哪些CSS样式被特别应用于h1元素。

Lets say I see the following styles applied to the element.

假设我看到了以下应用于元素的样式。

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

Now you need to pin point the exact style which are applied to the H1 and unset them in a css class. This would look something like the following:

现在需要确定应用于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;
    font-family: 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;
}

This is much cleaner and does not just dump a random blob of code into your css which you don't know what it's actually doing.

这更简洁，而且不会随意地将一团代码转储到css中，而您并不知道它实际上在做什么。

Now you can add this class to your h1

现在可以将这个类添加到h1中

<h1 class="no-style-h1">
     Title
</h1>

#7

In my specific scenario i wanted to skip applying common styles to a specific part of the page, better illustrated like this:

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

<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>

After messing with CSS reset which didn't bring much success (mainly because of rules precedence and complex stylesheet hierarchy), brought up ubiquitous jQuery to the rescue, which did the job very quickly and reasonably dirty:

CSS重置失败(主要是由于规则优先性和复杂的样式表层次结构)之后，出现了无处不在的jQuery来拯救它，它很快地完成了任务，而且相当脏:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(Now tell how evil it is to use JS to deal with CSS :-) )

(现在告诉大家使用JS处理CSS有多糟糕:-)

#8

You mentioned mobile-first sites... For a responsive design, it's certainly possible to override small-screen styles with large-screen styles. But you might not need to.

你提到的尝试网站…对于一个响应式设计，它当然可以覆盖大屏幕样式的小屏幕样式。但你可能不需要这么做。

Try this:

试试这个:

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

Those media queries don't overlap, so their rules don't override each other. This makes it easier to maintain each set of styles separately.

这些媒体查询不会重叠，所以它们的规则不会相互覆盖。这样可以更容易地分别维护每一组样式。

#9

For those of you trying to figure out how to actually remove the styling from the element only, without removing the css from the files, this solution works with jquery:

对于那些想要弄清楚如何只从元素中删除样式而不从文件中删除css的人来说，这个解决方案可以使用jquery:

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

#10

if you set your CSS within classes, you can easly remove them using jQuery removeClass() Method. The code below removes .element class:

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

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

If no parameter is specified, this method will remove ALL class names from the selected elements.

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

#11

Any chance you're looking for the !important rule? It doesn't undo all declarations but it provides a way to override them.

你有机会找到重要的规则吗?它不会撤销所有的声明，但它提供了一种覆盖它们的方法。

"When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity."

当在样式声明中使用了重要的规则时，此声明将覆盖在声明列表中的任何其他CSS声明。虽然，重要与具体无关"

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

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

#12

BETTER SOLUTION

更好的解决方案

Download "copy/paste" stylesheet‎ to reset css properties to default (UA style):
https://github.com/monmomo04/resetCss.git

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

Thanks@Milche论!我正在寻找重置/默认样式属性值。我的第一个尝试是从根(html)元素的浏览器开发工具中复制计算值。但是根据它的计算，它在每个系统上看起来都是不同的。对于那些在尝试使用星号*来重置子元素的样式时遇到浏览器崩溃的人，并且我知道它对您不起作用，我已经用所有的HTML标记名替换了星号“*”。浏览器不崩溃;我使用的是Chrome版本46.0.2490.71 m。最后，很好地指出，这些属性会将样式重置为最顶层根元素的默认样式，而不是每个HTML元素的初始值。‎纠正这种,我采取了“用户代理”风格的基于webkit的浏览器,它在“重置这个类实现。

Useful link:

Download "copy/paste" stylesheet‎ to reset css properties to default (UA style):
https://github.com/monmomo04/resetCss.git

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

User-agent style:
Browsers' default CSS for HTML elements
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

用户代理风格:浏览器的默认CSS HTML元素http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css。

Css specifity (pay attention to specifity) :
https://css-tricks.com/specifics-on-css-specificity/

Css specifity(注意specifity): https://css- phs.com/s-on - Css - ity/

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

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

#13

No, this is just a matter of managing your css structure better.

不，这只是一个更好的管理css结构的问题。

In your case i would order my css something like this:

在你的情况下，我会订购像这样的css:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

Just experiment.

只是实验。