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

Posted 2023-03-05

技术标签:

【中文标题】将 CSS 显示属性重置为默认值【英文标题】：Reset CSS display property to default value 【发布时间】：2012-01-03 23:10:06 【问题描述】：

是否可以使用默认值覆盖显示属性？例如，如果我在一种样式中将其设置为 none，并且我想用其默认值覆盖它。

或者是找出那个元素的默认值然后设置它的唯一方法？不想知道元素是否通常是块，内联或任何...

【问题讨论】：

现在可以使用unset。 display test: unset, initial, inherit, revert 我知道这个问题只询问有关显示被重置为浏览器默认值的问题，但是对于许多将访问此页面并希望将所有属性重置为浏览器默认值的人来说，请使用：.myclass all: unset; div 全部：未设置；等 【参考方案1】：

浏览器的默认样式在其用户代理样式表中定义，您可以找到其来源here。不幸的是，Cascading and Inheritance level 3 spec 似乎没有提出将样式属性重置为其浏览器默认值的方法。然而，有计划在Cascading and Inheritance level 4 中重新引入一个关键字——工作组还没有确定这个关键字的名称（链接目前显示revert，但它不是最终的）。有关revert 的浏览器支持信息，请访问caniuse.com。

虽然 3 级规范确实引入了 initial keyword，但将属性设置为其初始值会将其重置为其默认值由 CSS 定义，不是浏览器定义的。 display的初始值为inline；这是指定的here。 initial 关键字指的是该值，而不是浏览器默认值。规范本身在all property：

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

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

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

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

（上面的替代方案是div.foo:not(.bar) display: inline-block; ，但这涉及修改原始选择器而不是覆盖。）

【讨论】：

啊，为什么浏览器总是要那么慢才能获得好的和有用的东西：p 为什么用户必须这么慢升级......无论如何，这正是我想要的！ @Svish：原来我误解了initial 的实际作用。我已经更新了我的答案。 @Svish：CSS 在属性级别定义初始值，而不是我最初认为的基于每个元素的值。在此示例中，display 的初始值始终为 inline (w3.org/TR/CSS21/visuren.html#display-prop)，无论它位于 div 还是 span 上。 div 元素默认为display: block，根据 HTML，而不是 CSS，因此由浏览器的 UA 样式表决定 div display: block; 。 "CSS 在属性级别定义初始值，而不是我最初认为的基于每个元素的值。" -- 实际上我不得不重新阅读它一些次相信它。（因为 CSS 似乎总是被应用在（某种）元素上下文中，所以在这里不支持它意味着学习一些不简单的东西——有人知道原理吗？） default 已重命名为 revert。【参考方案2】：

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

当然可以为属性设置一个您期望为默认值的值。如果您查看 HTML5 CR 的 Rendering 部分，这可能会非常有效，主要反映了浏览器的实际操作。

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

【讨论】：

【参考方案3】：

关于 BoltClock 和 John 的回答，我个人在使用 IE11 时遇到了 initial 关键字的问题。它在 Chrome 中运行良好，但在 IE 中似乎没有效果。

根据这个答案 IE 不支持初始关键字： Div display:initial not working as intended in ie10 and chrome 29

我尝试按照此处的建议将其设置为空白： how to revert back to normal after display:none for table row

这很有效，对我的场景来说已经足够好了。当然要设置真正的初始值，上面的答案是我能找到的唯一好的答案。

【讨论】：

【参考方案4】：

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

【讨论】：

请注意，这仅适用于首先使用 JavaScript 或内联 style 属性设置样式的情况。您不能使用此方法覆盖或删除样式表中的声明。 @BoltClock 我不同意。这是一个 jsfiddle，我认为它反驳了你所说的。 jsfiddle.net/g45qagt3 对不起，我对覆盖这个词的使用令人困惑。我的意思是为空字符串设置样式只会删除通过style 属性或JavaScript setter 应用的样式。如果您通过 JS 设置了特定的值，您仍然可以覆盖样式表声明，但将其设置为空相当于根本不设置它 - 样式表声明将保持不变。查看修改后的小提琴：jsfiddle.net/BoltClock/g45qagt3/1 值得注意的是，空字符串适用于任何属性，而不仅仅是“显示” 2021：我很确定我必须回到旧代码并修复 thss，因为它不再假定默认...【参考方案5】：

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

【讨论】：

出现你必须实际将生成的元素附加到标签才能获得计算的样式，至少在 Chrome 中是这样。【参考方案6】：

取消设置`display`:

您可以使用unset 的值，它适用于Firefox and Chrome。

display: unset;

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

【讨论】：

unset 和initial 有同样的问题。 display 的值将变为 inline。见codepen.io/Gidgidonihah/pen/mwWxEq OP 显然希望将每个元素重置为默认值，例如将 span 重置为 inline 并将 div 重置为阻止。 unset 将无济于事，因为它的每个属性都将始终将显示重置为 inline。请考虑更新您的答案。【参考方案7】：

根据我对您的问题的理解，例如：您在样式表的开头有一个样式（例如 background-color: red），然后使用 java 脚本将其更改为另一种样式（例如 background-颜色：绿色），现在您想将样式重置为样式表中的原始值（背景颜色：红色），而无需提及甚至不知道其值（例如 element.style.backgroundColor = 'red'）...！

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

步骤：

根据您的需要像往常一样在样式表中设置默认样式。在样式表中定义一个新的类名并添加你想要的新样式。当您想在样式之间触发时，将新的类名添加到元素或将其删除。

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

我希望这会有所帮助。问候！

【讨论】：

【参考方案8】：

对我有用的是revert！