仅重置/删除元素的 CSS 样式

Reset/remove CSS styles for element only

提问by matt_50

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 that there was a css rule available that would remove any styles previously set in the stylesheet for a particular element.

我依稀记得我不久前看到的一条推文，该推文表明有一个可用的 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;
}

Example usage:

用法示例：

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

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

Makes sense?

说得通？

回答by Milche Patern

The CSS3 keyword initialsets the CSS3 property to the initial value as defined in the spec. The initialkeyword has broad browser supportexcept for the IE and Opera Mini families.

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

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 : '1C' '1D' '18' '19';
    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;
    }
}

• Relevent github repo with a december 2017more exaustive list
• Related
• Related from MDN
• Related W3C specs

• 与2017 年 12 月更详尽的列表相关的github 存储库
• 有关的
• 相关来自 MDN
• 相关的 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

[2017 年 2 月 4 日发布编辑] 用户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.

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.

例如，如果作者在元素上指定 all:initial，它将阻止所有继承并重置所有属性，就好像在级联的作者、用户或用户代理级别中没有出现任何规则。

这对于包含在页面中的“小部件”的根元素非常有用，它不希望继承外部页面的样式。但是请注意，应用于该元素的任何“默认”样式（例如，显示：块来自 UA 样式表中的块元素，例如 ）也将被吹走。

---

---

JAVASCRIPT ?

爪哇脚本？

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

没有人想过除了css来重置css吗？是的？

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

有一个完全相关的片段：https: //stackoverflow.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

VisioN 于 2013 年 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: obliquetriggers DOM operation.

为了便于比较，这里是Firefox的40.0值列表 <blockquote style="all: unset;font-style: oblique">，其中font-style: oblique触发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;

回答by joost

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
• Not supported: Safari

• 支持（来源）：Chrome 37、Firefox 27、IE 11、Opera 24
• 不支持：Safari

回答by Asim K T

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

这个问题找到了一个全新的解决方案。

Use all: revertor all: unset.

使用all: revert或all: unset。

From MDN:

来自 MDN：

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

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

在许多情况下，revert 关键字的作用与 unset 完全相同。唯一的区别是具有由浏览器或由用户创建的自定义样式表（在浏览器端设置）设置的值的属性。

您需要“一个可用的 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-classand all other inherited and applied styles to that div.

将重置由施加各种风格other-class，another-class和其他所有继承和应用样式到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.

1. revert

Actually revert, as the name says, reverts that property to its user or user-agent style.

2. all

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

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

1. revert

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

2. all

当我们使用revert该all属性时，应用于该元素的所有 CSS 属性都将恢复为 user/user-agent 样式。

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 likely scenario) or to user-agentstyles itself if no user styles set.

如果没有设置用户样式，这会将所有author styles（即开发人员 CSS）恢复为user styles（我们网站的用户设置的user-agent样式- 不太可能的情况）或样式本身。

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 revertvalue at the time of writing.

唯一的问题是支持：revert在撰写本文时，只有 Safari 9.1 和 iOS Safari 9.3 支持价值。

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

所以我会说使用这种风格并回退到任何其他答案。

回答by JS_Riddler

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 couldbe, 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:

用例是当您为未知的 3rd 方网站提供可显示组件以供使用时。这方面的例子是：

1. An ad tag
2. Building a browser extension that inserts content
3. Any type of widget

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

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. Display Limitations: Your content is locked inside of a rectangle.

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

If your content canfit 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 并显式设置内容来解决问题 #1，从而绕过这个问题，因为 iframe 和文档将共享相同的域。

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 thinktheir 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，并在所有属性值定义上使用 !important .

回答by T.Todua

another ways:

另一种方式：

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

1) 包含Yahoo CSS 重置的 css 代码（文件），然后将所有内容放入此 DIV：

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

2) or use

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/

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

回答by BrandonReid

If you happen to be using sass in a build system, one way to do this that will work in all the major browsers is to wrap all your style imports with a :not() selector like so...

如果您碰巧在构建系统中使用 sass，那么在所有主要浏览器中都可以使用的一种方法是使用 :not() 选择器包装所有样式导入，就像这样......

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

Then you can use the disable class on a container and the sub-content won't have any of your styles.

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

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

Of course all your styles will now be prepended with the :not() selector, so it's a little fugly, but works well.

当然，您的所有样式现在都将带有 :not() 选择器，因此它有点笨拙，但效果很好。

回答by Harry

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.

假设出于 SEO 的目的，您需要在设计中没有实际标题的页面上包含 H1。您可能希望将该页面的导航链接设为 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>

回答by esteewhy

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

回答by Monero Jeanniton

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.

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

有用的链接：

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

用户代理样式：
浏览器对 HTML 元素的默认 CSS
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 规范（注意规范）：https:
//css-tricks.com/specifics-on-css-specificity/

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

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

回答by jkdev

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.

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