将 CSS 显示属性重置为默认值 [英] Reset CSS display property to default value

问题描述

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

或者是找出该元素的默认值然后将其设置为该元素的唯一方法?不想知道元素通常是块，内联还是其他......

解决方案

浏览器的默认样式在其用户代理样式表中定义，您可以找到其来源 此处.不幸的是，级联和继承级别 3 规范 似乎没有提出一种方法将样式属性重置为其浏览器默认值.但是，有计划在 级联和继承中为此重新引入一个关键字级别 4 — 工作组还没有确定这个关键字的名称(链接当前显示 revert，但它不是最终的).有关 revert 的浏览器支持信息，请访问 caniuse.com.

虽然 3 级规范确实引入了 initial 关键字，将属性设置为其初始值会将其重置为由 CSS 定义的默认值，不是由浏览器定义的em>.display的初始值为inline；这是在此处指定的.initial 关键字指的是那个值，而不是浏览器的默认值.规范本身在 all 下做了这个注释属性:

<块引用>

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

这对于小部件"的根元素很有用.包含在一个页面中，该页面不希望继承外部页面的样式.但是，请注意，任何默认"应用于该元素的样式(例如，

等块元素上的 UA 样式表中的 display:block)也将被吹走.>

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

div.foo { display: inline-block;}div.foo.bar { 显示:块；}

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

Is it possible to override the display property with its default value? For example if I have set it to none in one style, and I want to override it in a different with its default.

Or is the only way to find out what the default of that element is and then set it to that? Would like to not have to know if the element is usually block, inline or whichever...

解决方案

A browser's default styles are defined in its user agent stylesheet, the sources of which you can find here. Unfortunately, the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default. However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4 — the working group simply hasn't settled on a name for this keyword yet (the link currently says revert, but it is not final). Information about browser support for revert can be found on caniuse.com.

While the level 3 spec does introduce an initial keyword, setting a property to its initial value resets it to its default value as defined by CSS, not as defined by the browser. The initial value of display is inline; this is specified here. The initial keyword refers to that value, not the browser default. The spec itself makes this note under the all property:

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.

So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that:

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

(An alternative to the above would be div.foo:not(.bar) { display: inline-block; }, but that involves modifying the original selector rather than an override.)

这篇关于将 CSS 显示属性重置为默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！