CSS - 全部

简写 CSS 属性 all 会重置元素的所有属性，但 unicode bidi、direction 和 CSS 自定义属性除外。

它可以将属性重置为其原始值或继承的值，或者重置为在另一个级联层或样式表原点中显式定义的值。

成分属性

此属性用作所有 CSS 属性的简洁表示形式，但 unicode bidi、direction 和 CSS 自定义属性除外。

all 属性是使用全局 CSS 关键字值之一指定的。请务必注意，这些值都不会影响 unicode bidi 和 direction 属性。

可能的值

以下是所有属性的可能值列表。

initial - 指示元素的所有属性都应重置为其初始值。
inherit - 指示元素的所有属性都应设置为其继承的值。
unset - 指示在默认继承的情况下，元素的属性应设置为继承的值，否则应设置为其初始值。
revert - 根据与声明关联的样式表来源指定行为：

如果规则链接到作者的源，则 revert 值会将级联还原到用户级别，并重新计算指定的值，就像未将作者级别的规则应用于元素一样。在 restore 的上下文中，作者原点包括覆盖原点和动画原点。
如果规则是用户源的一部分，则值 revert 会将级联重置为用户代理级别。这意味着，在计算指定的值时，就好像没有在作者或用户级别为元素定义任何规则一样。
如果规则源自用户代理源，则值 revert 的行为类似于 unset。

revert-layer - 指定将元素的所有属性回滚到上一个级联层（如果可用）。这仍处于实验阶段。如果没有其他级联图层可用，则元素的属性将重置为当前图层中的匹配规则（如果可用）或较早的样式原点。

语法


all = initial | inherit | unset | revert | revert-layer

CSS all - 基本示例

在以下示例中，CSS all 属性用于完全调整特定元素中的所有样式属性。
第一个 <div> id=custom1 展示了不带 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>No all property:</p>
<div id="custom1">Hello from a creative and innovative universe!</div>
<p>all: inherit:</p>
<div id="custom2">Discover the virtually endless possibilities in your head.</div>
<p>all: initial:</p>
<div id="custom3">Welcome the start of an interesting new trip.</div>
<p>all: unset:</p>
<div id="custom4">Use the power of new ideas to realize your full potential.</div>
</body>
</html>

打印本页