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

是否可以使用其默认值覆盖display属性？例如，如果我以一种样式将其设置为none，而我想以其默认值以其他方式覆盖它。

还是找出该元素的默认值然后将其设置为默认值的唯一方法？不想知道元素通常是block，inline还是任何一个...

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

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

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

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

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

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

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

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

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

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

这是jsbin的链接。

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

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

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

未设定 display：

您可以使用unset在Firefox和Chrome中都可以使用的值。

display: unset;

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

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

当然，可以将属性设置为您期望的默认值。如果您检查HTML5 CR 的“ 渲染”部分，这可能会相当广泛，主要反映了浏览器的实际功能。

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

如果可以访问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'

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

根据此答案，IE不支持初始关键字： Div display：initial不能按预期在ie10和chrome 29中工作

我尝试将其设置为空白，如下所示： 如何在显示后恢复正常：表行无

对于我的情况，这有效并且足够好。当然要设置实际的初始值，上述答案是我能找到的唯一好的答案。