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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

尝试一下

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

语法

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

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

unset

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

revert

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

用户代理来源

相当于 unset

用户来源

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

作者来源

将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于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> 使用浏览器默认样式，以及另外的定义的背景色与文字颜色。它是一个 block 元素：它之后的文字位于它的下方。

B. all: initial

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

C. all:initial

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

D. all:inherit

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

规范

Specification
CSS Cascading and Inheritance Level 4
# all-shorthand

浏览器兼容性

参见

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