是否可以使用默认值覆盖显示属性?例如,如果我在一种样式中将其设置为无,并且我想用另一种样式覆盖它,并使用它的默认值。
或者是找出该元素的默认值然后将其设置为的唯一方法?不想知道元素是否通常是块,内联或任何…
浏览器的默认样式在其用户代理样式表中定义,您可以在此处找到其来源。不幸的是,Cascading and Inheritance level 3 规范似乎没有提出将样式属性重置为其浏览器默认值的方法。然而,有计划在级联和继承级别 4中重新引入一个关键字——工作组还没有确定这个关键字的名称(当前链接显示revert,但它不是最终的)。revert可以在caniuse.com上找到有关浏览器支持的信息。
revert
虽然 3 级规范确实引入了initial关键字,但将属性设置为其 初始值 会将其重置 为 CSS 定义的 默认值, 而不是浏览器定义的 默认值。display的初始值为inline; 这是在这里指定的。initial关键字是指该值,而不是浏览器默认值。all规范本身在属性下做了这个注释:
initial
display
inline
all
例如,如果作者all: initial在一个元素上指定,它将阻止所有继承并重置所有属性,就好像在级联的作者、用户或用户代理级别中没有出现任何规则一样。 这对于包含在页面中的“小部件”的根元素很有用,它不希望继承外部页面的样式。但是请注意,应用于该元素的任何“默认”样式(例如,display: block来自块元素的 UA 样式表,例如<div>)也将被吹走。
例如,如果作者all: initial在一个元素上指定,它将阻止所有继承并重置所有属性,就好像在级联的作者、用户或用户代理级别中没有出现任何规则一样。
all: initial
这对于包含在页面中的“小部件”的根元素很有用,它不希望继承外部页面的样式。但是请注意,应用于该元素的任何“默认”样式(例如,display: block来自块元素的 UA 样式表,例如<div>)也将被吹走。
display: block
<div>
所以我想现在使用纯 CSS 的唯一方法是查找浏览器默认值并将其手动设置为:
div.foo { display: inline-block; } div.foo.bar { display: block; }
(上述方法的替代方法是div.foo:not(.bar) { display: inline-block; },但这涉及修改原始选择器而不是覆盖。)
div.foo:not(.bar) { display: inline-block; }