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

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

虽然级别3规范确实引入了 initial关键字，但是将属性设置为 初始值会将其重置为默认值 由 CSS 定义，不是由浏览器定义的。display的初始值是 inline; 这是指定的 给你。initial关键字引用该值，而不是浏览器默认值。规范本身在 display0下做了如下说明:

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

这对于包含在页面中的“ widget”的根元素非常有用，因为它不希望继承外部页面的样式。然而，请注意，任何应用于该元素的“默认”样式(例如，在块元素(如 <div>)上的 UA 样式表中的 display: block)也将被吹走。

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

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

(上述选择的替代方案是 div.foo:not(.bar) { display: inline-block; }，但这涉及修改原始选择器而不是重写。)

不，一般来说是不可能的。一旦某些 CSS (或 HTML)代码为元素的属性设置了值，就没有办法撤消它并告诉浏览器使用其默认值。

当然，可以将属性设置为 期待作为默认值。如果您检查 HTML5CR 的 渲染部分，这可能工作得相当广泛，主要反映了浏览器实际上做了什么。

不过，答案是“不”，因为浏览器可能有任何他们喜欢的默认值。您应该分析希望重置为默认值的原因; 原创的问题可能仍然是可以解决的。

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

这个方法很有效，对我的设想也足够了。当然，要设置真正的初始值，上面的答案是我能找到的唯一好答案。

可以将 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 中设置的样式

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'

未设定 display:

您可以使用在两个 火狐和 Chrome中都有效的值 unset。

display: unset;

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

根据我对你问题的理解，举个例子: 你在样式表 (ex. background-color: red)中有一个样式，然后用 java 脚本把它改成另一个样式 (ex. background-color: green)，现在你想在样式表 (background-color: red)中将样式重置为它的原始值，而不提及甚至不知道它的值 (ex. element.style.backgroundColor = 'red')...!

如果我是正确的，我有一个很好的解决方案，那就是对元素使用另一个类名:

步骤:

1. 根据您的需要在样式表中设置默认样式。
2. 在样式表中定义新的类名并添加所需的新样式。
3. 当要在样式之间触发时，请将新类名添加到元素中或删除它。

如果要编辑或设置新样式，请根据新的类名获取元素并根据需要编辑样式。

希望这个能帮上忙，问候你！

对我有效的是 revert！

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