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

时间:2013-04-09 11:49:17

标签: 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;
  }
}

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

有道理吗?

16 个答案:

答案 0 :(得分:519)

CSS3关键字initial设置CSS3 property to the initial value as defined in the spec。除了IE和Opera Mini系列之外,initial关键字有broad browser support

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

如@ user566245的评论中所述:

  

原则上这是正确的,但个别里程可能会有所不同。对于   例如某些元素,比如textarea,默认情况下有边框,   应用此重置将使这些textarea的边界更少。

[编辑2月4日,'17] 用户Joost

赞成成为现代规范
#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

W3的例子

  

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

     

这对包含在a中的“小部件”的根元素很有用   页面,不希望继承外页的样式。   但请注意,应用于该元素的任何“默认”样式(例如   例如,例如display:阻止UA样式表上的块元素   as)也会被吹走。


JAVASCRIPT?

除了css之外没有人想过重置css?是

剪辑完全相关:https://stackoverflow.com/a/14791113/845310

  

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

于2013年2月9日20:15通过VisioN

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

说完这一切;我不认为css重置是可行的,除非我们最终只有一个Web浏览器..如果最终由浏览器设置'default'。

为了比较,这里是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;

答案 1 :(得分:140)

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

#someselector {
  all: initial;
  * {
    all: unset;
  }
}
  • 支持(source): Chrome 37,Firefox 27,IE 11,Opera 24
  • 不支持:Safari

答案 2 :(得分:24)

让我彻底回答这个问题,因为这几年来一直是我痛苦的根源,很少有人真正理解这个问题以及为什么要解决这个问题很重要。如果我对CSS规范负有全部责任,坦率地说,由于在过去十年中没有解决这个问题,我会感到尴尬。

问题

您需要将标记插入HTML文档,并且需要以特定方式查找。此外,您不拥有此文档,因此您无法更改现有的样式规则。您不知道可能的样式表,或者它们可能会改变的内容。

用于此的用例是在为未知的第三方网站提供可显示的组件时使用。例如:

  1. 广告代码
  2. 构建插入内容的浏览器扩展程序
  3. 任何类型的小部件
  4. 最简单的修复

    将所有内容放入iframe中。这有它自己的一套限制:

    1. 跨域限制:您的内容根本无法访问原始文档。您无法覆盖内容,修改DOM等。
    2. 显示限制:您的内容被锁定在矩形内。
    3. 如果您的内容可以放入框中,您可以通过让您的内容编写iframe并明确设置内容来解决问题#1,从而绕过问题,因为iframe和文档将共享相同的域名。

      CSS解决方案

      我一直在寻找解决方案,但遗憾的是没有。您可以做的最好的事情是显式覆盖所有可以覆盖的可能属性,并将它们覆盖到您认为的默认值。

      即使您覆盖,也无法确保更有针对性的CSS规则不会覆盖您的。这里你能做的最好的事情就是让你的覆盖规则尽可能具体地定位,并希望父文档不会意外地使用它:在你的内容的父元素上使用一个模糊或随机的ID,并在所有属性值定义上使用!important

答案 3 :(得分:20)

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

  

您需要“可用的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-classanother-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
  2.         

    实际上revert正如名称所说,将该属性还原为它   用户或用户代理样式。

         
        
    1. all
    2.         

      当我们将revertall属性一起使用时,所有CSS属性   应用于该元素将恢复为用户/用户代理样式。

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

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

.isolated-component {
 all: revert;
}

将所有author styles(即开发人员CSS)还原为user styles(我们网站的用户设置的样式 - 不太可能的情况)或user-agent样式本身(如果没有用户样式)集。

此处有更多详情:https://developer.mozilla.org/en-US/docs/Web/CSS/revert

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

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

答案 4 :(得分:11)

另一种方式:

1)包含Yahoo CSS reset的css代码(文件),然后将所有内容放入此DIV中:

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

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

答案 5 :(得分:3)

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

我建议您评估如何根据每个案例从元素中删除样式。

让我们说出于搜索引擎优化的目的,您需要在页面中包含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;
}

这个更干净,不仅仅是将随机的代码块转储到你的css中,你不知道它实际上在做什么。

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

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

答案 6 :(得分:3)

如果您恰好在构建系统中使用sass,则可以在所有主要浏览器中使用的一种方法是像这样用:not()选择器包装所有样式导入。

@Html.HiddenFor(x => x.StoryId)

然后,您可以在容器上使用disable类,并且子内容不会具有任何样式。

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

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

答案 7 :(得分:3)

快速答案是使用 "all:revert"

.element {
  all:revert;
}

"all:revert" 将重置元素上的所有样式属性。在文本或继承属性的情况下,"revert" 将元素的 CSS 属性重置为其从“body”元素或浏览器的默认 UA 样式值继承的值,而不是属性的基本样式。对于非继承属性,它会再次将其重置为浏览器的默认样式,而不是属性的基本样式。 “all”允许影响所有属性。

这很可能是您想看到的。您可以使用 "initial""unset",但您必须为每个属性手动应用它们,更糟糕的是,它们不会将属性返回到元素的默认显示值,而是从本质上擦除元素的属性值并创建一个完全无样式的元素。例如,对于您选择使用“display:initial”设置的所有元素,“display:block”将更改为“display:inline”。您永远不想这样做,因为它会从所选元素中完全删除您的样式和浏览器的默认 UA 元素样式。它以这种方式工作的原因是所有 HTML 元素都没有任何样式,因此在应用包含所有元素样式的浏览器的 UA 表之前,大多数元素看起来都是一样的。 “初始”和“未设置”会从浏览器中清除大部分内容。 "revert" 至少保留了用户浏览器应用的基本样式集,因此优于 "initial""unset"

使用 "all:revert" 的问题:这是较新的 CSS 声明,仅适用于更现代的 HTML5 浏览器(自 2020 年以来)。较旧的非 HTML5 浏览器(2010 年之前)都无法理解此声明,因此它们将忽略此声明。也没有任何版本的 Internet Explorer 理解“all:revert”。只有 IE8+ 理解“初始”,所以那些旧版本不会受到影响。然而,它并不可靠,但仍然是我使用的有用工具。 :)

现在寻求更好的解决方案

这里有两个想法被混淆了:

  1. 第一个想法是将样式“返回”到浏览器的 UA 样式表值集(安装时浏览器随附的样式表,用于定义每个元素的外观)。每个浏览器都定义了自己的样式,即元素的默认外观。这个想法是将所有页面样式返回到每个浏览器的原生元素样式。
  2. 第二个想法是将所有默认浏览器样式“重置”为所有浏览器共享的通用外观。人们构建了特殊的“重置”表,以尝试将所有浏览器元素统一为普遍认可的样式。这与浏览器的默认 UA 样式无关,更多的是关于“清理”并将所有浏览器对齐到一个通用的基本样式。这只是一个附加过程。

这是两个非常不同的概念,人们在这里很容易混淆。

因为每个浏览器通常都有默认的、开箱即用的元素和布局样式,看起来略有不同,人们想出了“重置”或“重启”样式表的想法,以便在应用之前对齐所有浏览器自定义 CSS。例如,Bootstrap 现在就是这样做的。但这与人们想要返回浏览器的默认外观无关。

问题不在于构建这些自定义“重置”样式表,而是在应用任何样式之前弄清楚每个浏览器和每个元素的默认 CSS 是什么。大多数人发现在“清除”所有已应用的样式之前,您无法重建现有的干净级联。但是如何恢复到默认的浏览器样式?

对于某些人来说,这意味着超越将元素返回到浏览器随附的浏览器 UA 样式表。许多人想重置回“初始”属性值,这与浏览器的默认样式无关,但实际上是属性默认值。这是危险的,因为在“显示”的情况下,将块级元素推回到“内联”并破坏表格布局和其他事情。

所以我不同意这里的用户使用“初始”来重置任何东西或自定义重置类将每个属性更改回某个任意基值集。

对我来说更好的解决方案一直是尝试尝试将所有核心元素样式返回到浏览器的 UA 样式表值,无论如何我们所有的最终用户都在使用它。如果您正在创建一个新网站,则不必执行此操作。您从浏览器的默认样式开始并添加到它们中。只有在您添加了第三方 CSS 产品,或者发现自己有复杂的 CSS 级联之后,您才想要弄清楚如何返回到浏览器默认样式表值。

出于这个原因,我打算创建您自己的“重置”表,首先将所有元素重置为所有新旧浏览器共享的通用样式作为第一步。然后,您将拥有一个可靠的框架,无需返回浏览器默认设置即可更轻松地恢复到该框架。您只是建立在一组重置的通用核心元素样式值上。一旦构建了您自己的“重置”表(添加而不是更改浏览器的 UA 样式),您就拥有了一个非常容易修改的站点。

剩下的唯一问题是当您的站点没有这样的重置表,或者有复杂的第三方 CSS 并且需要尝试返回到浏览器 UA 样式时。你是怎么做到的?

我意识到 Internet Explorer 已经迫使我们手动重置每个属性以恢复到任何类型的重置。但是将这些属性值全部推回“初始”会完全破坏浏览器 UA 样式表值!馊主意!更好的方法是使用通配符在非 IE 浏览器的每个元素上简单地使用“all:revert”,并仅对在“html”和“body”元素中找到的少数继承的根级属性使用“继承”影响页面中的所有继承子级。 (见下文)。我不是为了使用“初始”或回到一些我们假设所有浏览器或 IE 都将使用的虚构标准来进行这些巨大的属性重置。对于初学者来说,“初始”在 IE 中的支持很差,并且不会将值重置为元素默认值,只有属性默认值。但是,如果您要创建一个重置表以将所有元素与通用样式对齐,这也是毫无意义的。在这种情况下,清除样式并重新开始是没有意义的。

所以这是我的简单解决方案,在大多数情况下,它足以重置从根目录筛选到 IE 中的基于文本的值,并对所有非 IE 浏览器使用“all:revert”以强制非继承值返回浏览器的 UA 样式表完全,给你一个真正的重启。这不会干扰在元素样式上分层的更高级别的类和样式,无论如何这应该始终是目标。这就是为什么我不适合这些乏味且不必要的自定义重置类,并且无论如何都不会将元素返回到其浏览器 UA 样式。请注意下面稍微更具选择性的选择器,它们会覆盖例如 Bootstrap 的“重新启动”样式值,将它们返回到浏览器默认样式。当然,这些不会重置 IE 元素上的元素样式,但对于非 IE 浏览器和大多数可继承的文本样式,它会将大多数代理中的元素返回到浏览器附带的 UA 样式表:

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

答案 8 :(得分:1)

你提到了移动优先网站......对于响应式设计,它当然可以覆盖具有大屏幕风格的小屏幕风格。但你可能不需要。

试试这个:

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

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

答案 9 :(得分:1)

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

children

在搞乱CSS复位并没有取得多大成功之后(主要是因为规则优先级和复杂的样式表层次结构),提出了无处不在的jQuery来救援,这使得工作非常快速且合理地变脏:

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

(现在讲一下用JS来处理CSS是多么邪恶:-))

答案 10 :(得分:0)

对于那些试图找出如何仅从元素中删除样式的人,而不从文件中删除css,此解决方案适用于jquery:

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

答案 11 :(得分:0)

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

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

如果未指定参数,则此方法将删除 所选元素中的所有类名。

答案 12 :(得分:0)

如果有人来这里寻找使用 iframe 的答案,这里是

<iframe srcdoc="<html><body>your-html-here</body></html>" />

https://caniuse.com/iframe-srcdoc

答案 13 :(得分:-1)

你有没有机会寻找重要规则?它不会撤消所有声明,但它提供了一种覆盖它们的方法。

“当一个!important规则用于样式声明时,该声明会覆盖CSS中的任何其他声明,无论它在声明列表中的哪个位置。虽然,!important与特异性无关。”

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

答案 14 :(得分:-1)

更好的解决方案

下载&#34;复制/粘贴&#34;样式表将css属性重置为默认值(UA样式):
https://github.com/monmomo04/resetCss.git

谢谢@Milche Patern!
我真的在寻找重置/默认样式属性值。我的第一次尝试是从根(html)元素的浏览器开发工具中复制计算值。但是在计算时,它在每个系统上看起来/工作都不同。
对于那些在尝试使用星号*重置子元素的样式时遇到浏览器崩溃的人,并且我知道它不适合你,我已经替换了星号&#34; *&#34 ;改为使用所有HTML标记名称。浏览器没有崩溃;我在Chrome版本46.0.2490.71米。
最后,值得一提的是,这些属性会将样式重置为topest根元素的默认样式,而不是每个HTML元素的初始值。所以为了纠正这个问题,我采用了#34;用户代理&#34;基于webkit的浏览器的样式,并在&#34; reset-this&#34;类。

有用的链接:


下载&#34;复制/粘贴&#34;样式表将css属性重置为默认值(UA样式):
https://github.com/monmomo04/resetCss.git

用户代理风格:
Browsers' default CSS for HTML elements
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

答案 15 :(得分:-2)

不,这只是更好地管理您的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}
}

只是试验。