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-bididirection 之外的所有属性重设至其初始值,或继承值。

尝试一下

语法

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

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

all 属性被作为 CSS 全局关键词的其中之一。不过需要注意的是,unicode-bididirection 这两个属性是不受 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-colortransparent(初始值),但其 font-size 仍为 small(继承值),其 colorblue(继承值)。

C. all:initial

<blockquote> 没有使用浏览器默认样式:它现在是一个 inline 元素(初始值),其 background-colortransparent(初始值),其 font-sizenormal(初始值),其 colorblack(初始值)。

D. all:inherit

<blockquote> 没有使用浏览器默认样式:它现在是一个 block 元素(继承自其父元素 <body>),其 background-colortransparent(继承值),其 font-sizesmall(继承值),其 colorblue(继承值)。

规范

Specification
CSS Cascading and Inheritance Level 4
# all-shorthand

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
all

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见

CSS 通用属性值:initialinheritunset