是否有可用的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;
  }
}

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


当前回答

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

当在样式声明上使用!important规则时,该声明将覆盖CSS中所做的任何其他声明,无论它位于声明列表中的哪个位置。虽然,important与专一性无关。

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

其他回答

如果你碰巧在构建系统中使用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()选择器作为前缀,所以这有点难看,但效果很好。

如果有人来这里寻找一个答案,利用iframe在这里

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

https://caniuse.com/iframe-srcdoc

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浏览器,如果'默认'是由浏览器设置的。

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

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

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