all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

CSS all 简写属性将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

尝试一下

语法

css

/* Global values */
all: initial
all: inherit
all: unset

/* CSS Cascading and Inheritance Level 4 */
all: revert;

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

取值

initial

该关键字代表改变该元素或其父元素的所有属性至初始值。

inherit

该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited values

unset

该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。

revert

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

User-agent origin: 相当于 unset
User origin: 将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。
Author origin: 将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于revert的目的，“作者”原点包括“覆盖”和“动画”原点。

形式定义

初始值	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

示例

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;
}

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> 使用浏览器默认样式，以及另外的定义的背景色与文字颜色。它是一个 block 元素：它之后的文字位于它的下方。

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> 没有使用浏览器默认样式：它现在是一个 inline 元素（初始值），其 background-color 为 transparent（初始值），但其 font-size 仍为 small（继承值），其 color 为 blue（继承值）。

C. `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: inherit;
}

<blockquote> 没有使用浏览器默认样式：它现在是一个 inline 元素（初始值），其 background-color 为 transparent（初始值），其 font-size 为 normal（初始值），其 color 为 black（初始值）。

D. `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: unset;
}

<blockquote> 没有使用浏览器默认样式：它现在是一个 block 元素（继承自其父元素 <body>），其 background-color 为 transparent（继承值），其 font-size 为 small（继承值），其 color 为 blue（继承值）。

规范

Specification
CSS Cascading and Inheritance Level 4 # all-shorthand

浏览器兼容性

BCD tables only load in the browser

参见

CSS 通用属性值： initial、inherit 和 unset。

A. 没有 all 属性

B. all: initial

C. all:initial

D. all:inherit

A. 没有 `all` 属性

B. `all: initial`

C. `all:initial`

D. `all:inherit`