View in EnglishAlways switch to English

all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

CSS 简写属性all 将除了unicode-bidi、direction 与CSS 自定义属性之外的所有属性重设。它可以将属性设置为初始值或继承值，也可以设置为其他层叠层或样式表来源中指定的值。

尝试一下

/*未设置 all 属性*/

all: initial;

all: inherit;

all: unset;

all: revert;

<section>  <div>    <div>      <p>        该段的字体大小为 1.5rem，颜色为金色。用户代理还为其设置了 1rem        的垂直边距。段落的父级是一个蓝色虚线边框的 &lt;div&gt;。      </p>    </div>  </div></section>

#example-element {  color: gold;  padding: 10px;  font-size: 1.5rem;  text-align: left;  width: 100%;}.example-container {  border: 2px dashed #2d5ae1;}.example-container-bg {  background-color: #77767b;  padding: 20px;}

组成属性

该属性是除unicode-bidi、direction 和自定义属性以外的所有 CSS 属性的简写。

语法

css

/* 全局值 */all: initial;all: inherit;all: unset;all: revert;all: revert-layer;

all 属性被作为 CSS 全局关键字的其中之一。不过需要注意的是，以上这些值不会影响unicode-bidi 与direction 这两个属性。

取值

initial

指定将元素的所有属性都更改为它们的初始值。

inherit

指定将元素的所有属性都更改为它们的继承值。

unset

如果是默认继承值，则指定元素的所有属性更改为继承值；如果不是默认继承值，则指定元素的所有属性更改为初始值。

revert

指定依赖于声明所属的样式表来源的行为：

如果规则属于作者来源，则revert 值会将层叠回滚到用户级别，以便计算指定值，就像没有为该元素指定作者级别的规则一样。就“还原”而言，作者来源包括覆盖来源和动画来源。
如果规则属于用户来源，则revert 值会将层叠回滚到用户代理级别，以便计算指定值，就像没有为元素指定作者级或用户级规则一样。
如果规则属于用户代理来源，则revert 值的作用类似于unset。

revert-layer

指定元素的所有属性都应回滚到之前的层叠层（如果存在）。如果不存在其他层叠层，元素的属性将回滚到当前层中的匹配规则（如果存在）或之前的样式来源。

形式定义

初始值	There is no practical initial value for it.
适用元素	所有元素
是否是继承属性	否
计算值	as the specified value applies to each property this is a shorthand for.
动画类型	as each of the properties of the shorthand (all properties but`unicode-bidi` and`direction`)

形式语法

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

示例

在本示例中，CSS 文件包含<blockquote> 元素以及父级<body> 元素的一些样式。“结果”小节中的各种输出结果展示了在对<blockquote> 元素规则中的all 属性应用不同值时，<blockquote> 元素的样式会受到怎样的影响。

HTML

html

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

CSS

css

body {  font-size: small;  background-color: #f0f0f0;  color: blue;  margin: 0;  padding: 0;}blockquote {  background-color: skyblue;  color: red;}

结果

A. 没有`all` 属性

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

body {  font-size: small;  background-color: #f0f0f0;  color: blue;}blockquote {  background-color: skyblue;  color: red;}

这就是在blockquote 规则中没有设置all 属性的情况。<blockquote> 使用浏览器默认样式，它具有边距，以及样式表中指定的特定背景和文本颜色。它是一个块级元素：它之后的文字位于它的下方。

B.`all: initial`

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

body {  font-size: small;  background-color: #f0f0f0;  color: blue;}blockquote {  background-color: skyblue;  color: red;  all: initial;}

将blockquote 规则中的all 属性设置为initial 后，<blockquote> 元素不再使用浏览器默认样式：它现在是行级元素（初始值），其background-color是transparent（初始值）、font-size 为medium，color 为black（初始值）。

C.`all: inherit`

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

body {  font-size: small;  background-color: #f0f0f0;  color: blue;}blockquote {  background-color: skyblue;  color: red;  all: inherit;}

在本例中，<blockquote> 元素并没有使用浏览器的默认样式。相反，它继承了父级<body> 元素的样式：它现在是块级元素（继承值），它的background-color 是#F0F0F0（继承值），它的font-size 是small（继承值），它的color 是blue（继承值）。

D.`all: unset`

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

body {  font-size: small;  background-color: #f0f0f0;  color: blue;}blockquote {  background-color: skyblue;  color: red;  all: unset;}

当unset 值应用于blockquote 规则中的all 属性时，<blockquote> 元素不会使用浏览器的默认样式。因为background-color 是一个非继承属性，而font-size 和color是继承属性。<blockquote> 元素现在是行级元素（初始值），它的background-color 是transparent（初始值），但它的font-size 仍然是small（继承值），它的color 是blue（继承值）。

E.`all: revert`

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

body {  font-size: small;  background-color: #f0f0f0;  color: blue;}blockquote {  background-color: skyblue;  color: red;  all: revert;}

当blockquote 规则中的all 属性设置为revert 时，blockquote 规则将被视为不存在，其样式属性值将继承应用于父元素<body> 的属性值。因此，<blockquote> 元素会被样式化为块级元素，并具有background-color#F0F0F0、font-sizesmall 和colorblue——所有值均继承自body 规则。

F.`all: revert-layer`

<blockquote>  Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>Phasellus eget velit sagittis.

body {  font-size: small;  background-color: #f0f0f0;  color: blue;}blockquote {  background-color: skyblue;  color: red;  all: revert-layer;}

CSS 文件中没有定义层叠层，因此<blockquote> 元素的样式继承自匹配的body 规则。这里的<blockquote> 元素被样式化为块级元素，并使用background-color#F0F0F0、font-sizesmall 和colorblue——body 规则继承的所有值。此示例说明了将all 设为revert-layer 时与将all 设为revert 时的行为相同。