是否可以使用默认值覆盖display属性?例如,如果我以一种样式将其设置为none,而我想以其默认值以其他方式覆盖它。
还是找出该元素的默认值然后将其设置为默认值的唯一方法?不想知道元素通常是block,inline还是任何一个…
浏览器的默认样式在其用户代理样式表中定义,您可以在此处找到其来源。不幸的是,级联和继承级别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; }