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

是否可以使用默认值替代显示属性？例如，如果我在一种样式中将其设置为“无”，并且我希望使用其默认值以不同的样式替代它

---

或者是找出该元素的默认值并将其设置为该值的唯一方法？您不想知道元素是否通常是块、内联或其他…

浏览器的默认样式是在其用户代理样式表中定义的，您可以找到这些样式表的源。遗憾的是，似乎没有提出将样式特性重置为其浏览器默认值的方法。然而，有计划在中重新引入一个关键字-工作组还没有确定该关键字的名称（链接当前显示为

revert

，但它不是最终的）。有关

还原的浏览器支持的信息，请访问

虽然级别3规范引入了一个属性，但将属性设置为其初始值将重置为CSS定义的默认值，而不是浏览器定义的默认值。
display
的初始值为
inline
；这是规定的。
initial
关键字引用该值，而不是浏览器默认值。规范本身在以下内容下做了说明：

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

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

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

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

（上述方法的替代方法是
div.foo:not（.bar）{display:inline block；}
，但这涉及修改原始选择器而不是覆盖。）
不，通常不可能。一旦某些CSS（或HTML）代码为元素的属性设置了值，就无法撤消该属性并告诉浏览器使用其默认值

当然，可以将属性设置为您期望的默认值。如果您查看HTML5 CR的部分，这可能会起到相当广泛的作用，主要反映浏览器的实际功能

不过，答案是“不”，因为浏览器可能有他们喜欢的任何默认值。您应该分析想要重置为默认值的原因；最初的问题可能仍然可以解决。
关于BoltClock和John的答案，我个人在使用IE11时对初始关键字有问题。它在Chrome中运行良好，但在IE中似乎没有效果

根据此答案，IE不支持初始关键字：

我尝试将其设置为空白，如此处所示：

这很有效，对于我的场景来说已经足够好了。当然，要设置真正的初始值，我只能找到上面的答案。
如果允许使用javascript，可以将
display
属性设置为空字符串。这将导致它使用该特定元素的默认值

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

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

这里是一个链接到一个

这很好，因为您不必担心要恢复到的不同类型的显示（
块
，
内联
，
内联块
，
表格单元格
，等等）

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

注意：这将覆盖内联样式，但不覆盖css中设置的样式。如果您有权访问JavaScript，则可以创建元素并读取其计算样式。

取消设置
显示
：
您可以使用值
unset
，该值在两种情况下都有效


根据我对您问题的理解，例如：您在样式表的开头有一个样式（例如背景色：红色），然后使用java脚本将其更改为另一个样式（例如背景色：绿色），现在您希望将样式重置为样式表中的原始值（背景色：红色）没有提到甚至不知道它的价值（例如element.style.backgroundColor='red'）

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

步骤：

根据您的需要，像往常一样在样式表中设置默认样式
在样式表中定义新的类名并添加所需的新样式
如果要在样式之间触发，请将新类名添加到元素或将其删除
如果要编辑或设置新样式，请按新类名获取元素，然后根据需要编辑样式

我希望这有帮助。问候
 啊，为什么浏览器总是这么慢才能得到好的和有用的东西：p，为什么用户升级这么慢。。。无论如何，这正是我想要的@斯维什：原来我误解了
首字母的实际作用。我已经更新了我的答案。@Svish:CSS在属性级别定义初始值，而不是像我最初认为的那样在每个元素的基础上定义初始值。在此示例中，
display
的初始值始终为
inline
（），而不管它是在
div
上还是在
span
上。默认情况下，
div
元素是根据HTML的
display:block
，而不是CSS，因此浏览器的UA样式表会说
div{display:block；}
“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: unset;

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