CSS 如何从元素中删除每个样式？

how to remove every style from element?

提问by rsk82

By 'remove' I mean resetting all the style that may descend on such element and put it to browser defaults.

“删除”是指重置可能出现在此类元素上的所有样式并将其置于浏览器默认值中。

I need this for debug, I don't know what rule is causing harm and I thing good approach is to remove all styles and then loose the restriction one by one to check when things start to go wrong.

我需要这个进行调试，我不知道是什么规则造成了伤害，我认为好的方法是删除所有样式，然后一一放松限制以检查何时开始出错。

Have you seen any snippets on the web that would consist of:

您是否在网络上看到过包含以下内容的任何片段：

{ right: auto !important; left: auto !important; visibility: visible !important;...

and so on through every possible style.

等等所有可能的风格。

采纳答案by Jukka K. Korpela

You cannot. There's the value initialproposed in CSS3 drafts, but even if it were defined, it would set properties to the initial values defined in CSS specifications, not as defined by browser defaults. For example, the initial value of the displayproperty is inline, but surely browsers don't render everything as inline elements by default.

你不能。initialCSS3 草案中提出了这个值，但即使定义了它，它也会将属性设置为 CSS 规范中定义的初始值，而不是浏览器默认值定义的值。例如，display属性的初始值是inline，但浏览器肯定不会默认将所有内容都呈现为内联元素。

A better approach to your original problem is to use debugging and inspecting tools like Firebug or Web Developer Extension for Firefox. They let you see which styles apply to an element and where they come from.

解决原始问题的更好方法是使用调试和检查工具，例如 Firebug 或 Web Developer Extension for Firefox。它们让您查看哪些样式适用于元素以及它们来自何处。

回答by ThinkingStiff

If you're on Chrome/Safari, initialworks just fine for what you want to do. After setting it, you'll see the active style as initialand the the computed style as the browser default.

如果您使用的是 Chrome/Safari，则initial可以很好地满足您的需求。设置后，您将看到活动样式为initial浏览器默认样式，计算样式为浏览器默认样式。

But to set the active styles to the default, create a temporary element and set your element properties to the the temporary values.

但是要将活动样式设置为默认值，请创建一个临时元素并将元素属性设置为临时值。

Demo: http://jsfiddle.net/ThinkingStiff/Yb9J9/

演示：http: //jsfiddle.net/ThinkingStiff/Yb9J9/

Script:

脚本：

Element.prototype.setDefaultStyles = function () {
    var element = document.createElement( this.tagName ),
        styles = window.getComputedStyle( element ),
        display = styles.getPropertyValue( 'display' );
    element.style.display = 'none';
    document.body.appendChild( element );

    for( style in styles ) {
        this.style[styles[style]] = styles.getPropertyValue(styles[style]);   
    };

    this.style.display = display;
    document.body.removeChild( element );
};

document.getElementById( 'unstyled' ).setDefaultStyles();

HTML:

HTML：

<div id="styled">styled</div>
<div id="unstyled">unstyled</div>

CSS:

CSS：

#styled, #unstyled {
    border: 1px solid red;
    color: green;
    width: 100px;
    height: 50px;
}

Output:

输出：

回答by Yash Kumar Verma

try this. make a class named something like this and then use it

尝试这个。创建一个名为这样的类然后使用它

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

Originally from here: Reset/remove CSS styles for element only

最初来自此处：仅重置/删除元素的 CSS 样式

回答by Christopher Marshall

Use a reset style sheet that loads before all your other style sheets.

使用在所有其他样式表之前加载的重置样式表。

I use a modified version of http://meyerweb.com/eric/tools/css/reset/

我使用http://meyerweb.com/eric/tools/css/reset/的修改版本