mdn · jasonren0403 · Jul 7, 2025 · Jul 8, 2025
@@ -1,16 +1,18 @@
 ---
 title: all
 slug: Web/CSS/all
+l10n:
+  sourceCommit: 1b88b4d62918f6f13d1155825e3881f52d90206e
 ---
 
 {{CSSRef}}
 
-[CSS](/zh-CN/docs/Web/CSS) **`all`** [简写属性](/zh-CN/docs/Web/CSS/CSS_cascade/Shorthand_properties) 将除了 {{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 之外的所有属性重设至其初始值或继承值。
+[CSS](/zh-CN/docs/Web/CSS) [简写属性](/zh-CN/docs/Web/CSS/CSS_cascade/Shorthand_properties) **`all`** 将除了 {{cssxref("unicode-bidi")}}、{{cssxref("direction")}} 与 [CSS 自定义属性](/zh-CN/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)之外的所有属性重设。它可以将属性设置为初始值或继承值，也可以设置为其他层叠层或样式表来源中指定的值。
 
-{{InteractiveExample("CSS Demo: all")}}
+{{InteractiveExample("CSS 演示：all")}}
 
 ```css interactive-example-choice
-/*no all property*/
+/*未设置 all 属性*/
 ```
 
 ```css interactive-example-choice
@@ -34,9 +36,8 @@ all: revert;
   <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.
+        该段的字体大小为 1.5rem，颜色为金色。用户代理还为其设置了 1rem
+        的垂直边距。段落的父级是一个蓝色虚线边框的 &lt;div&gt;。
       </p>
     </div>
   </div>
@@ -62,47 +63,51 @@ all: revert;
 }
 ```
 
+## 组成属性
+
+该属性是除 {{cssxref("unicode-bidi")}}, {{cssxref("direction")}} 和[自定义属性](/zh-CN/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)以外的所有 CSS 属性的简称。
+
 ## 语法
 
 ```css
-/* Global values */
-all: initial
-all: inherit
-all: unset
-
-/* CSS Cascading and Inheritance Level 4 */
+/* 全局值 */
+all: initial;
+all: inherit;
+all: unset;
 all: revert;
+all: revert-layer;
 ```
 
-`all` 属性被作为 CSS 全局关键词的其中之一。不过需要注意的是，{{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 这两个属性是不受 `all` 影响的
+`all` 属性被作为 CSS 全局关键字的其中之一。不过需要注意的是，以上这些值不会影响 {{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 这两个属性。
 
 ### 取值
 
 - {{cssxref("initial")}}
-  - : 该关键字代表改变该元素或其父元素的所有属性至初始值。
+  - : 指定将元素的所有属性都更改为它们的[初始值](/zh-CN/docs/Web/CSS/CSS_cascade/Value_processing#初始值)。
 - {{cssxref("inherit")}}
-  - : 该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。[继承值](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance)
+  - : 指定将元素的所有属性都更改为它们的[继承值](/zh-CN/docs/Web/CSS/CSS_cascade/Inheritance)。
 - {{cssxref("unset")}}
-  - : 该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。
+  - : 如果是默认继承值，则指定元素的所有属性更改为继承值；如果不是默认继承值，则指定元素的所有属性更改为初始值。
 - {{cssxref("revert")}}
   - : 指定依赖于声明所属的样式表来源的行为：
-    - [用户代理来源](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade#用户代理样式表)
-      - : 相当于 `unset`
-    - [用户来源](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade#用户样式表)
-      - : 将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。
-    - [作者来源](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade#作者样式表)
-      - : 将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于`revert`的目的，“作者”原点包括“覆盖”和“动画”原点。
+    - 如果规则属于[作者来源](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade#作者样式表)，则 `revert` 值会将[层叠](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade)回滚到用户级别，以便计算[指定值](/zh-CN/docs/Web/CSS/CSS_cascade/Value_processing#指定值)，就像没有为该元素指定作者级别的规则一样。就“还原”而言，作者来源包括覆盖来源和动画来源。
+    - 如果规则属于[用户来源](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade#用户样式表)，则 `revert` 值会将[层叠](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade)回滚到用户代理级别，以便计算[指定值](/zh-CN/docs/Web/CSS/CSS_cascade/Value_processing#指定值)，就像没有为元素指定作者级或用户级规则一样。
+    - 如果规则属于[用户代理来源](/zh-CN/docs/Web/CSS/CSS_cascade/Cascade#用户代理样式表)，则 `revert` 值的作用类似于 `unset`。
+- {{cssxref("revert-layer")}}
+  - : 指定元素的所有属性都应回滚到之前的[层叠层](/zh-CN/docs/Web/CSS/@layer)（如果存在）。如果不存在其他层叠层，元素的属性将回滚到当前层中的匹配规则（如果存在）或之前的[样式来源](/zh-CN/docs/Glossary/Style_origin)。
 
 ### 形式定义
 
 {{cssinfo}}
 
-### 形式语法
+## 形式语法
 
 {{csssyntax}}
 
 ## 示例
 
+在本示例中，CSS 文件包含 {{HTMLElement("blockquote")}} 元素以及父级 `<body>` 元素的一些样式。“结果”小节中的各种输出结果展示了在对 `<blockquote>` 元素规则中的 `all` 属性应用不同值时，`<blockquote>` 元素的样式会受到怎样的影响。
+
 ### HTML
 
 ```html
@@ -119,6 +124,8 @@ body {
   font-size: small;
   background-color: #f0f0f0;
   color: blue;
+  margin: 0;
+  padding: 0;
 }
 
 blockquote {
@@ -152,7 +159,7 @@ blockquote {
 
 {{EmbedLiveSample("A. 没有 all 属性", "200", "125")}}
 
-{{HTMLElement("blockquote")}} 使用浏览器默认样式，以及另外的定义的背景色与文字颜色。它是一个 block 元素：它之后的文字位于它的下方。
+这就是在 `blockquote` 规则中没有设置 `all` 属性的情况。{{HTMLElement("blockquote")}} 使用浏览器默认样式，它具有边距，以及样式表中指定的特定背景和文本颜色。它是一个*块级*元素：它之后的文字位于它的下方。
 
 #### B. `all: initial`
 
@@ -178,9 +185,9 @@ blockquote {
 
 {{EmbedLiveSample("B. all: initial", "200", "125")}}
 
-{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素（初始值），其 {{cssxref("background-color")}} 为 `transparent`（初始值），但其 {{cssxref("font-size")}} 仍为 `small`（继承值），其 {{cssxref("color")}} 为 `blue`（继承值）。
+将 `blockquote` 规则中的 `all` 属性设置为 `initial` 后，{{HTMLElement("blockquote")}} 元素不再使用浏览器默认样式：它现在是*行级*元素（初始值），其 [`background-color`](/zh-CN/docs/Web/CSS/background-color#形式定义)是 `transparent`（初始值）、[`font-size`](/zh-CN/docs/Web/CSS/font-size#形式定义) 为 `medium`，[`color`](/zh-CN/docs/Web/CSS/color#形式定义) 为 `black`（初始值）。
 
-#### C. `all:initial`
+#### C. `all: inherit`
 
 ```html hidden
 <blockquote id="quote">
@@ -202,11 +209,11 @@ blockquote {
 }
 ```
 
-{{EmbedLiveSample("C. all:initial", "200", "125")}}
+{{EmbedLiveSample("c._all_inherit", "200", "125")}}
 
-{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素（初始值），其 {{cssxref("background-color")}} 为 `transparent`（初始值），其 {{cssxref("font-size")}} 为 `normal`（初始值），其 {{cssxref("color")}} 为 `black`（初始值）。
+在本例中，{{HTMLElement("blockquote")}} 元素并没有使用浏览器的默认样式。相反，它继承了父级 {{HTMLElement("body")}} 元素的样式：它现在是*块级*元素（继承值），它的 {{cssxref("background-color")}} 是 `#F0F0F0`（继承值），它的 {{cssxref("font-size")}} 是 `small`（继承值），它的 {{cssxref("color")}} 是 `blue`（继承值）。
 
-#### D. `all:inherit`
+#### D. `all: unset`
 
 ```html hidden
 <blockquote id="quote">
@@ -228,9 +235,61 @@ blockquote {
 }
 ```
 
-{{EmbedLiveSample("D. all:inherit", "200", "125")}}
+{{EmbedLiveSample("d._all_unset", "200", "125")}}
+
+当 `unset` 值应用于 `blockquote` 规则中的 `all` 属性时，{{HTMLElement("blockquote")}} 元素不会使用浏览器的默认样式。因为 [`background-color`](/zh-CN/docs/Web/CSS/background-color#形式定义) 是一个非继承属性，而 [`font-size`](/zh-CN/docs/Web/CSS/font-size#形式定义) 和 [`color`](/zh-CN/docs/Web/CSS/color#形式定义)是继承属性。`<blockquote>` 元素现在是*行级*元素（初始值），它的 {{cssxref("background-color")}} 是 `transparent`（初始值），但它的 {{cssxref("font-size")}} 仍然是 `small`（继承值），它的 {{cssxref("color")}} 是 `blue`（继承值）。
+
+#### E. `all: revert`
+
+```html hidden
+<blockquote id="quote">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</blockquote>
+Phasellus eget velit sagittis.
+```
+
+```css hidden
+body {
+  font-size: small;
+  background-color: #f0f0f0;
+  color: blue;
+}
+blockquote {
+  background-color: skyblue;
+  color: red;
+  all: revert;
+}
+```
+
+{{EmbedLiveSample("e._all_revert", "200", "125")}}
+
+当 `blockquote` 规则中的 `all` 属性设置为 `revert` 时，`blockquote` 规则将被视为不存在，其样式属性值将继承应用于父元素 `<body>` 的属性值。因此，`<blockquote>` 元素会被样式化为*块级*元素，并具有 {{cssxref("background-color")}} `#F0F0F0`、{{cssxref("font-size")}} `small` 和 {{cssxref("color")}} `blue`——所有值均继承自 `body` 规则。
+
+#### F. `all: revert-layer`
+
+```html hidden
+<blockquote id="quote">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</blockquote>
+Phasellus eget velit sagittis.
+```
+
+```css hidden
+body {
+  font-size: small;
+  background-color: #f0f0f0;
+  color: blue;
+}
+blockquote {
+  background-color: skyblue;
+  color: red;
+  all: revert-layer;
+}
+```
+
+{{EmbedLiveSample("f._all_revert-layer", "200", "125")}}
 
-{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 block 元素（继承自其父元素 {{HTMLElement("body")}}），其 {{cssxref("background-color")}} 为 `transparent`（继承值），其 {{cssxref("font-size")}} 为 `small`（继承值），其 {{cssxref("color")}} 为 `blue`（继承值）。
+CSS 文件中没有定义层叠层，因此 `<blockquote>` 元素的样式继承自匹配的 `body` 规则。这里的 `<blockquote>` 元素被样式化为*块级*元素，并使用 {{cssxref("background-color")}} `#F0F0F0`、{{cssxref("font-size")}} `small` 和 {{cssxref("color")}} `blue`——`body` 规则继承的所有值。此示例说明了将 `all` 设为 `revert-layer` 时与将 `all` 设为 `revert` 时的行为相同。
 
 ## 规范
 
@@ -242,4 +301,4 @@ blockquote {
 
 ## 参见
 
-CSS 通用属性值：{{cssxref("initial")}}、{{cssxref("inherit")}} 和 {{cssxref("unset")}}。
+CSS 全局关键字值：{{cssxref("initial")}}、{{cssxref("inherit")}}、{{cssxref("unset")}}、{{cssxref("revert")}} 和 {{cssxref("revert-layer")}}。