首页 文章

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

提问于
浏览
378

我敢肯定以前必须提到/问过,但一直在寻找一个没有运气的年龄,我的术语一定是错的!

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.

一个很好的使用示例可能是在移动优先的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;
  }
}

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

说得通?

14 回答

  • -1

    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,它将阻止所有继承并重置所有属性,就好像级联的作者,用户或用户代理级别中没有出现规则一样 . 这对于页面中包含的“窗口小部件”的根元素非常有用,它不希望继承外部页面的样式 . 但请注意,应用于该元素的任何“默认”样式(例如,显示:来自块元素上的UA样式表中的块)也将被吹走 .


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

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

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

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

    • 不支持:Safari

  • 25

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

    The Problem

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

    用例是指为未知的第三方网站提供可显示的组件 . 这方面的例子是:

    • 广告代码

    • 构建插入内容的浏览器扩展

    • 任何类型的小部件

    Simplest Fix

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

    • 跨域限制:您的内容根本无法访问原始文档 . 您无法覆盖内容,修改DOM等 .

    • 显示限制:您的内容被锁定在矩形内 .

    如果您的内容可以放入框中,您可以通过让您的内容编写iframe并明确设置内容来解决问题#1,从而绕过问题,因为iframe和文档将共享同一个域 .

    CSS Solution

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

    即使您覆盖,也无法确保更有针对性的CSS规则不会覆盖您的规则 . 您可以在这里做的最好的事情是尽可能具体地覆盖覆盖规则,并希望父文档不是父元素,并在所有属性值定义上使用!important .

  • 126

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

    您需要“可用的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值 . 恢复实际上,正如名称所述,恢复该属性为其用户或用户代理样式 . all当我们使用all属性恢复时,应用于该元素的所有CSS属性都将恢复为用户/用户代理样式 .

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

    例如:如果我们想 isolate embedded widgets/components from the styles of the page that contains them ,我们可以写:

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

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

  • -1

    另一种方式:

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

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

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

  • 11

    我不建议使用此处标记为正确的答案 . 它是一大堆CSS,试图涵盖一切 .

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

    让我们说出于搜索引擎优化的目的,您需要在页面中包含H1,该页面在设计中没有实际的 Headers . 您可能希望将该页面的导航链接设为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>
    
  • 2

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

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

    然后,您可以在容器上使用禁用类,子内容将不具有任何样式 .

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

    当然所有的样式现在都会以:not()选择器为前缀,所以它有点难看,但效果很好 .

  • 0

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

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

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

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

  • 0

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

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

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

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

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

  • 3

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

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

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

  • 0

    BETTER SOLUTION

    下载"copy/paste" stylesheet将css属性重置为默认值(UA样式):
    https://github.com/monmomo04/resetCss.git

    谢谢@Milche Patern!
    我真的在寻找重置/默认样式属性值 . 我的第一次尝试是从根(html)元素的浏览器开发工具中复制计算值 . 但是在计算时,它会在每个系统上看起来/工作不同 .
    对于那些在尝试使用星号*来重置子元素的样式时遇到浏览器崩溃的人,并且我知道它没有崩溃;我在Chrome版本46.0.2490.71 m .
    最后,值得一提的是,这些属性会将样式重置为topest根元素的默认样式,而不是每个HTML元素的初始值 . 所以为了纠正这个问题,我采用了基于webkit的"user-agent"样式的浏览器,并在"reset-this"类下实现了它 .

    有用的链接:
    下载"copy/paste" stylesheet将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

  • 474

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

    试试吧 .

相关问题