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

我确定这一定是之前提到过/提出来的，但是一直在寻找一个没有运气的年龄，我的术语一定是错误的！

我模糊地记得我前一段时间看到的一条推文，暗示一条css规则可用，该规则将删除样式表中先前为特定元素设置的所有样式。

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

一个css规则可以达到以下目的：

.element {
  all: none;
}

用法示例：

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

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

说得通？

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

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

• Relevent github repo以及2017年12月的更多详细列表
• 有关
• 与MDN相关
• 相关W3C规格

如@ user566245的评论中所述：

这在原则上是正确的，但个人里程可能会有所不同。例如，某些元素（例如textarea）默认情况下具有边框，应用此重置将使这些textarea的边框变少。

[17年2月4日编辑后]用户Joost赞扬其成为现代规范

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

W3中的示例

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

这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。但是请注意，应用于该元素的任何“默认”样式（例如UA样式表上的UA样式表中的display：块，例如）也会被吹走。

JAVASCRIPT？

除了CSS以外，没有人考虑过要重置CSS吗？是？

有那个片段完全相关：https : //stackoverflow.com/a/14791113/845310

getElementsByTagName（“ *”）将返回DOM中的所有元素。然后，您可以为集合中的每个元素设置样式：

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 = ...
}

说了这么多；我不认为CSS重置是可行的，除非我们最终只使用一个Web浏览器..如果最后由浏览器设置了“默认”。

为了进行比较，这是Firefox 40.0值列表，用于触发DOM操作的 <blockquote style="all: unset;font-style: oblique">where font-style: oblique。

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;

对于未来的读者。我认为这是什么意思，但目前尚未得到广泛支持（请参阅下文）：

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

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

找到了解决此问题的全新解决方案。

使用all: revert或all: unset。

从MDN：

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

您需要“一个可用的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;
  }

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

会做。

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

1. revert

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

2. all

当我们使用revert该all属性时，应用于该元素的所有CSS属性都将还原为用户/用户代理样式。

单击此处了解作者，用户，用户代理样式之间的区别。

例如：如果我们想从嵌入的窗口小部件/组件与包含它们的页面样式中分离出来，我们可以这样写：

.isolated-component {
 all: revert;
}

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

此处有更多详细信息：https : //developer.mozilla.org/zh-CN/docs/Web/CSS/revert

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

因此，我将说使用这种样式并回退到其他任何答案。

让我彻底回答这个问题，因为多年来一直困扰着我，很少有人真正理解这个问题以及为什么解决这个问题很重要。坦率地说，如果我要对CSS规范负责，那我会很尴尬，因为过去十年没有解决这个问题。

问题

您需要在HTML文档中插入标记，并且标记必须具有特定的外观。此外，您不拥有此文档，因此无法更改现有的样式规则。你不知道什么样式表可能是什么，或可能会更改为什么。

为此，您需要为未知的第三方网站提供可显示的组件以供使用。例如：

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

最简单的修复

将所有内容放入iframe。这有它自己的局限性：

1. 跨域限制：您的内容将完全无法访问原始文档。您无法覆盖内容，修改DOM等。
2. 显示限制：您的内容被锁定在矩形内。

如果您的内容可以放入一个盒子，你可以有你的内容写一个iframe，明确设置的内容，从而踢脚围绕这一问题得到解决的问题＃1，因为iFrame和文件将共享同一个域。

CSS解决方案

我一直在寻找解决方案，但不幸的是没有。您能做的最好的事情就是显式地覆盖所有可能被覆盖的属性，并将它们覆盖到您认为的样子。它们的默认值。

即使覆盖，也无法确保更有针对性的CSS规则不会覆盖您的CSS规则。您在这里可以做的最好的事情是，使覆盖规则目标尽可能具体，并希望父文档不会意外地做到最好：在内容的父元素上使用晦涩或随机ID，并在所有属性值定义上使用！important 。

另一种方式：

1）包含Yahoo CSS reset的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/

我不建议您使用此处标记为正确的答案。它是CSS的一大块，试图覆盖所有内容。

我建议您根据情况评估如何从元素中删除样式。

可以说，出于SEO的目的，您需要在设计中没有实际标题的页面上包含H1。您可能希望将该页面的导航链接设为H1，但是您当然不希望该导航链接在页面上显示为巨型H1。

您应该做的是将该元素包装在h1标签中并进行检查。查看哪些CSS样式专门应用于h1元素。

可以说我看到以下样式应用于该元素。

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

这更加干净，并且不仅将随机的Blob代码转储到您的CSS中，而您不知道它的实际作用。

现在您可以将此类添加到您的h1

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

如果您恰巧在构建系统中使用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（）选择器，因此虽然有点笨拙，但效果很好。

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

尝试这个：

.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属性重置为默认值（UA样式）：https :
//github.com/monmomo04/resetCss.git

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

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

在我的特定情况下，我想跳过将通用样式应用于页面的特定部分，如下所示：

<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是多么邪恶的事情：-））

对于那些试图弄清楚如何仅实际从元素中删除样式而不从文件中删除CSS的用户，此解决方案可与jquery一起使用：

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

如果您在类中设置CSS，则可以使用jQuery removeClass（）方法轻松删除它们。下面的代码删除了.element类：

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

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

不，这只是更好地管理CSS结构的问题。

在您的情况下，我会命令我的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}
}

只是实验。

您是否正在寻找！重要规则？它不会撤消所有声明，但提供了一种覆盖它们的方法。

“在样式声明上使用！important规则时，此声明将覆盖CSS所做的任何其他声明，无论它在声明列表中的位置。尽管如此，！important与特定性无关。”

https://developer.mozilla.org/zh-CN/docs/CSS/Specificity#The_!important_exception