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

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

---

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

浏览器的默认样式是在其用户代理样式表中定义的，您可以找到这些样式表的源。遗憾的是，似乎没有提出将样式特性重置为其浏览器默认值的方法。然而，有计划在中重新引入一个关键字-工作组只是还没有确定这个关键字的名称，但链接目前称为revert，但它不是最终的。有关浏览器支持还原的信息，请访问

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

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

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

因此，我想现在使用纯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，为什么用户升级这么慢。。。无论如何，这正是我想要的@斯维什：原来我误解了initial的实际作用。我已经更新了我的答案。@Svish:CSS定义了

---

属性级别，而不是像我最初认为的那样基于每个元素。在本例中，display的初始值始终是内联的，无论它是在div上还是在span上。div元素是display:block，默认情况下根据HTML，而不是CSS，因此由浏览器的UA样式表来表示div{display:block；}。CSS在属性级别定义初始值，而不是像我最初认为的那样基于每个元素。-事实上，我不得不重读几遍才能相信它。由于CSS似乎总是应用于某种元素上下文中，因此在这里不支持它意味着需要学习一些非常重要的东西-有人知道其基本原理吗？默认值已重命名为revert。请注意，这仅适用于首先使用JavaScript或内联样式属性设置样式的情况。您不能使用此方法覆盖或删除样式表中的声明。@我不同意。这里有一个我认为与你所说的不符的例子。对不起，我用“覆盖”这个词让人困惑。我的意思是，将样式设置为空字符串只会删除通过style属性或JavaScript setter应用的样式。如果通过JS设置特定的值，仍然可以重写样式表声明，但将其设置为空相当于根本不设置它-样式表声明将保持不变。查看修改后的fiddle：值得注意的是，空字符串适用于任何属性，而不仅仅是display。现在可以使用unset。我知道这个问题只询问将显示重置为浏览器默认值的问题，但对于许多访问此页希望将所有属性重置回浏览器默认值的人来说，请使用：.myclass{all:unset；}div{all:unset；}等等。你必须实际将生成的元素附加到标记中才能获得计算样式，至少在Chrome中是这样。unset与initial存在相同的问题。display的值将变为inline。请参阅OP清楚地希望将每个元素重置为默认值，例如，将span重置为inline，将div重置为block。unset无助于由于它的每个属性，它总是将显示重置为内联。请考虑更新您的答案。

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; }