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

问题描述

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

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...

推荐答案

浏览器的默认样式在其用户代理样式表中定义，您可以在此处找到其来源。很遗憾，级联和继承第3级规范似乎没有提出将样式属性重置为其浏览器默认。但是，有计划在级联和继承级别4 中重新引入关键字，工作组简单地（该链接目前说默认，但它不是最终的，它与光标 code> property）。

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 default, but it is not final, and it conflicts with the cursor property anyway).

虽然第3级规范引入了 initial 关键字，将属性设置为初始值将其重置为默认值由CSS定义，不是由浏览器定义的。 显示的初始值为 inline ;请在此处中指定。 initial 关键字指的是该值，而不是浏览器默认值。规范本身在 全部 property ：

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:

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

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.

这对于包含在页面中的窗口小部件的根元素是有用的，其不希望继承外部页面的样式。但请注意，任何默认样式应用于该元素（例如 display：block 从UA样式表上的块元素，例如< div> ）也会被吹走。

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是查找浏览器默认值并手动设置为：

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

（上述的替代方法是 div.foo:not .bar）{display：inline-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屋！