CSS 属性 all 会重置元素的所有属性,但 unicode bidi、direction和CSS 自定义属性除外。
它可以将属性重置为其原始值或继承值,或者在另一个级联层或样式表源中显式定义的值。
属性构成
此属性作为所有 CSS 属性的简明表示,其中unicode bidi、direction和CSS 自定义属性除外。
all 属性使用全局 CSS 关键字值之一指定。但是请注意,这些值均不会影响 unicode bidi 和 direction 属性。
属性值
以下是所有属性的可能值的列表。
initial: 指示元素的所有属性应重置为其初始值。
inherit: 指示元素的所有属性应设置为其继承值。
unset: 表示在默认继承的情况下,元素的属性应设置为继承值,否则设置为其初始值。
revert: 根据与声明关联的样式表来源指定行为:
如果规则链接到作者的来源,则恢复值会将级联恢复到用户级别并重新计算指定的值,就好像没有对元素应用作者级别规则一样。
在恢复上下文中,作者来源包括覆盖和动画来源。
如果规则是用户来源的一部分,则值恢复将级联重置为用户代理级别。
这意味着计算指定值时就好像没有在元素的作者或用户级别定义规则一样。
如果规则源自用户代理源,则值恢复的行为与未设置类似。
revert-layer: 指定回滚所有属性将元素添加到前一个级联层(如果可用)。这仍处于实验阶段。
如果没有其他级联层可用,则元素的属性将重置为当前层中的匹配规则(如果可用),或重置为较早的样式原点。
语法
all = initial | inherit | unset | revert | revert-layer
CSS all: 基本示例
在以下示例中, CSS all 属性用于完全调整特定元素内的所有样式属性。
第一个 id=custom1 的 <div> 显示不带 all 属性的默认样式,而后续的 <div> 元素(custom2、custom3 和 custom4)演示 all:inherit;、all:initial; 和 all:unset; 的影响。
<html>
<head>
<style>
html {
font-size: x-large;
color: #2c3e50;
}
#custom1 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
}
#custom2 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
all: inherit;
}
#custom3 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
all: initial;
}
#custom4 {
background-color: #ecf0f1;
color: #e74c3c;
font-family: 'Verdana', sans-serif;
font-weight: bold;
all: unset;
}
</style>
</head>
<body>
<p>没有 all 属性:</p>
<div id="custom1">白日依山尽</div>
<p>all: inherit:</p>
<div id="custom2">黄河入海流</div>
<p>all: initial:</p>
<div id="custom3">欲穷千里目</div>
<p>all: unset:</p>
<div id="custom4">更上一层楼</div>
</body>
</html>