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

是否有可能重写显示属性的默认值? 例如,如果我已经把它设置为没有一个风格,我想重写它与默认不同。

或者是唯一的方法来找出该元素的默认设置,然后将其设置为? 想不必知道元素通常是块,内联还是其中的一个…

浏览器的默认样式是在其用户代理样式表中定义的,其源代码可以在这里找到。 不幸的是, 级联和继承级别3规范似乎没有提出将样式属性重置为浏览器默认值的方法。 然而,有计划在级联和继承级别4中为此重新引入一个关键字 – 工作组还没有确定这个关键字的名字(目前该链接表示default ,但不是最终的,它与cursor属性)。

尽管3级规范引入了initial关键字 ,但将属性设置为其初始值会将其重置为由CSS定义的默认值, 而不是由浏览器定义的display的初始值是inline ; 这是在这里指定的。 initial关键字是指该值,而不是浏览器的默认值。 该规范本身使all属性下的这个笔记:

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

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

所以我想现在使用纯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的链接。

这很好,因为你不必担心不同类型的显示器会回复到( blockinlineinline-blocktable-cell等)。

但是,它需要JavaScript,所以如果你正在寻找一个CSS的解决方案,那么这不是你的解决方案。

注意:这将覆盖内联样式,但不会在CSS中设置样式

取消设置display

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

 display: unset; 

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

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

当然可以将属性设置为您希望成为默认值的值。 如果您检查HTML5 CR的渲染部分,这可能会相当广泛,主要反映了浏览器实际上做了什么。

不过,答案是“否”,因为浏览器可能有他们喜欢的任何默认值。 你应该分析是什么原因想要重置为默认值; 原来的问题仍然是可以解决的。

关于BoltClock和John的答案,我个人在使用IE11时遇到了初始关键字的问题。 它在Chrome中正常工作,但在IE中似乎没有效果。

根据这个答案IE不支持最初的关键字: Div显示:初始不按预期工作在IE10和铬29

我试图将其设置为空白,而不是像这里所建议的那样: 显示后如何恢复正常:表格行没有

这工作,对我的情况足够好。 当然,要设置真正的初始值,上面的答案是我能找到的唯一好的答案。

如果您有权访问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'