all

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

all 是一个简写 CSS 属性，它可以重置元素的所有属性，但 unicode-bidi、direction 和 CSS 自定义属性除外。它可以将属性设置为其初始值、继承值，或另一个层叠层或样式表来源中指定的值。

试一试

/* no all property */

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </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

/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

all 属性被指定为 CSS 全局关键字值之一。请注意，这些值都不会影响 unicode-bidi 和 direction 属性。

值

initial

指定该元素的所有属性都应更改为其初始值。

inherit

指定该元素的所有属性都应更改为其继承值。

unset

指定该元素的所有属性都应更改为其继承值（如果它们默认继承），否则更改为其初始值。

revert

指定行为取决于声明所属的样式表来源

如果规则属于开发者样式表来源，revert 值会将层叠回滚到用户级别，因此指定值的计算将如同没有为该元素指定任何开发者级别的规则一样。为了 revert 的目的，开发者样式表来源包括覆盖（Override）和动画（Animation）来源。
如果规则属于用户样式表来源，revert 值会将层叠回滚到用户代理级别，因此指定值的计算将如同没有为该元素指定任何开发者级别或用户级别的规则一样。
如果规则属于用户代理样式表来源，revert 值的作用与 unset 相同。

revert-layer

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

正式定义

初始值	它没有实际的初始值。
应用于	所有元素
继承性	否
计算值	因为指定值适用于该简写属性所对应的每个属性。
动画类型	作为该简写属性的每个属性（除 `unicode-bidi` 和 `direction` 之外的所有属性）

正式语法

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

示例

在此示例中，CSS 文件除了包含父元素 <body> 的一些样式外，还包含 <blockquote> 元素的样式。结果小节中的各种输出演示了当在 blockquote 规则内为 all 属性应用不同值时，<blockquote> 元素的样式如何受到影响。

HTML

html

<blockquote id="quote">
  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 id="quote">
  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 id="quote">
  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 id="quote">
  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 id="quote">
  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;
}

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

E. `all: revert`

<blockquote id="quote">
  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-size 为 small，color 为 blue——所有值都从 body 规则继承而来。

F. `all: revert-layer`

<blockquote id="quote">
  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-size 为 small，color 为 blue——所有值都从 body 规则继承而来。此场景是 all 设置为 revert-layer 时行为与 all 设置为 revert 时相同的示例。