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

Question

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

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

Answer 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 下做了这个说明:

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.

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

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

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