all
===

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` (en-US)

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

User-agent origin

相当于 `unset`

User origin

将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。

Author origin

将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于`revert`的目的，“作者”原点包括“覆盖”和“动画”原点。


### 形式定义

|  |  |
| --- | --- |
| 初始值 | There is no practical initial value for it. |
| 适用元素 | all elements |
| 是否是继承属性 | 否 |
| 计算值 | as the specified value applies to each property this is a shorthand for. |
| Animation type | 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 with JavaScript enabled. Enable JavaScript to view data.

参见
--

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