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

Question

是否可以使用其默认值覆盖display属性？例如,如果我在一种样式中将其设置为none,并且我希望以其默认值覆盖它.

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

Answer 1

浏览器的默认样式在其用户代理样式表中定义,您可以在此处找到源代码.遗憾的是,级联和继承级别3规范似乎没有提出将样式属性重置为其浏览器默认值的方法.但是,有计划在层叠和继承级别4中重新引入关键字- 工作组尚未确定此关键字的名称(链接当前显示revert,但它不是最终的).

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

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

这对于页面中包含的"窗口小部件"的根元素非常有用,它不希望继承外部页面的样式.但请注意,应用于该元素的任何"默认"样式(例如,all: initial来自块元素上的UA样式表等display: block)也将被吹走.

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

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

(上面的替代方案是<div>,但这涉及修改原始选择器而不是覆盖.)

Answer 2

如果允许使用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中设置的样式

Answer 3

未设置display:

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

display: unset;

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

Answer 4

对我有用的是revert！

如果属性继承自其父级，则 revert会将属性重置为其继承值，或者重置为用户代理样式表建立的默认值。

Answer 5

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

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

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

Answer 6

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