将 CSS 显示属性重置为默认值

Reset CSS display property to default value

提问by Svish

Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.

是否可以使用默认值覆盖显示属性？例如，如果我在一种样式中将其设置为无，并且我想以不同的方式覆盖它的默认值。

Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...

或者是找出该元素的默认值然后将其设置为该元素的唯一方法？不想知道元素通常是块，内联还是其他任何...

采纳答案by BoltClock

A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 specdoes not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4— the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revertcan be found on caniuse.com.

浏览器的默认样式在其用户代理样式表中定义，您可以在此处找到其来源。不幸的是，级联和继承级别 3 规范似乎没有提出将样式属性重置为其浏览器默认值的方法。然而，有计划在级联和继承级别 4 中为此重新引入一个关键字——工作组还没有确定这个关键字的名称（链接目前显示revert，但它不是最终的）。revert可以在caniuse.com上找到有关浏览器支持的信息。

While the level 3 spec does introduce an initialkeyword, setting a property to its initial valueresets it to its default value as defined by CSS, not as defined by the browser. The initial value of displayis inline; this is specified here. The initialkeyword refers to that value, not the browser default. The spec itself makes this note under the allproperty:

虽然级别 3 规范确实引入了initial关键字，但将属性设置为其初始值会将其重置为 CSS 定义的默认值，而不是浏览器定义的默认值。的初始值display就是inline; 这是在此处指定的。该initial关键字指的是价值，而不是浏览器的默认。规范本身在all属性下做了这个注释：

For example, if an author specifies all: initialon an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: blockfrom the UA style sheet on block elements such as <div>) will also be blown away.

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

这对于包含在页面中的“小部件”的根元素非常有用，它不希望继承外部页面的样式。但是请注意，应用于该元素的任何“默认”样式（例如，display: block来自块元素上的 UA 样式表，例如<div>）也将被吹走。

So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:

所以我想现在使用纯 CSS 的唯一方法是查找浏览器默认值并手动将其设置为：

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)

（上面的替代方法是div.foo:not(.bar) { display: inline-block; }，但这涉及修改原始选择器而不是覆盖。）

回答by thetallweeks

If using javascript is allowed, you can set the displayproperty to an empty string. This will cause it to use the default for that particular element.

如果允许使用 javascript，您可以将该display属性设置为空字符串。这将导致它使用该特定元素的默认值。

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Here is a link to a jsbin.

这是jsbin的链接。

This is nice because you don't have to worry about the different types of display to revert to (block, inline, inline-block, table-cell, etc).

这是很好的，因为你不必对不同类型的显示的担心恢复到（block，inline，inline-block，table-cell，等）。

But, it requires javascript, so if you are looking for a css-only solution, then this is not the solution for you.

但是，它需要 javascript，所以如果您正在寻找仅 css 的解决方案，那么这不是适合您的解决方案。

Note: This overrides inline styles, but not styles set in css

注意：这会覆盖内联样式，但不会覆盖 css 中设置的样式

回答by Sheharyar

Unset display:

取消设置display：

You can use the value unsetwhich works in both Firefox and Chrome.

您可以使用unset适用于Firefox 和 Chrome 的值。

display: unset;

---

---

.foo     { display: none;  }
.foo.bar { display: unset; }

回答by Jukka K. Korpela

No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value.

不，通常是不可能的。一旦某些 CSS（或 HTML）代码为元素上的属性设置了一个值，就无法撤消它并告诉浏览器使用其默认值。

It is of course possible to set a property a value that you expectto be the default value. This may work rather widely if you check the Renderingsection of HTML5 CR, mostly reflecting what browsers actually do.

当然可以将属性设置为您希望作为默认值的值。如果您检查HTML5 CR的渲染部分，这可能会很有效，主要反映浏览器的实际操作。

Still, the answer is “No”, because browsers may have whatever default values they like. You should analyze what was the reason for wanting to reset to defaults; the originalproblem may still be solvable.

不过，答案是否定的，因为浏览器可能有他们喜欢的任何默认值。您应该分析想要重置为默认值的原因；在原来的问题可能仍然是可以解决的。

回答by Frederik Krautwald

Ifyou have access to JavaScript, you can create an element and read its computed style.

如果您可以访问JavaScript，则可以创建一个元素并读取其计算样式。

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

回答by S?ren Ullidtz

Concerning the answer by BoltClock and John, I personally had issues with the initial keyword when using IE11. It works fine in Chrome, but in IE it seems to have no effect.

关于 BoltClock 和 John 的回答，我个人在使用 IE11 时对初始关键字有问题。它在 Chrome 中运行良好，但在 IE 中似乎没有效果。

According to this answer IE does not support the initial keyword: Div display:initial not working as intended in ie10 and chrome 29

根据这个答案 IE 不支持初始关键字： Div display:initial not working as expected in ie10 and chrome 29

I tried setting it blank instead as suggested here: how to revert back to normal after display:none for table row

我尝试按照此处的建议将其设置为空白： how to revert back to normal after display:none for table row

This worked and was good enough for my scenario. Of course to set the real initial value the above answer is the only good one I could find.

这行得通，对于我的场景来说已经足够好了。当然，要设置真正的初始值，上面的答案是我能找到的唯一好的答案。