all

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

all 是一個簡寫 CSS 屬性，它可以重置元素的所有屬性，但 unicode-bidi、direction 和 CSS 自定義屬性除外。它可以將屬性設定為其初始值、繼承值，或另一個層疊層或樣式表來源中指定的值。

試一試

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

構成屬性

此屬性是除 unicode-bidi、direction 和自定義屬性之外的所有 CSS 屬性的簡寫。

語法

css

/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

all 屬性被指定為 CSS 全域性關鍵字值之一。請注意，這些值都不會影響 unicode-bidi 和 direction 屬性。

值

initial

指定該元素的所有屬性都應更改為其初始值。

inherit

指定該元素的所有屬性都應更改為其繼承值。

unset

指定該元素的所有屬性都應更改為其繼承值（如果它們預設繼承），否則更改為其初始值。

revert

指定行為取決於宣告所屬的樣式表來源

如果規則屬於開發者樣式表來源，revert 值會將層疊回滾到使用者級別，因此指定值的計算將如同沒有為該元素指定任何開發者級別的規則一樣。為了 revert 的目的，開發者樣式表來源包括覆蓋（Override）和動畫（Animation）來源。
如果規則屬於使用者樣式表來源，revert 值會將層疊回滾到使用者代理級別，因此指定值的計算將如同沒有為該元素指定任何開發者級別或使用者級別的規則一樣。
如果規則屬於使用者代理樣式表來源，revert 值的作用與 unset 相同。

revert-layer

指定該元素的所有屬性都應將層疊回滾到上一個層疊層（如果存在）。如果沒有其他層疊層，則元素的屬性將回滾到當前層中的匹配規則（如果存在），或回滾到上一個樣式來源。

正式定義

初始值	它沒有實際的初始值。
應用於	所有元素
繼承性	否
計算值	因為指定值適用於該簡寫屬性所對應的每個屬性。
動畫型別	作為該簡寫屬性的每個屬性（除 `unicode-bidi` 和 `direction` 之外的所有屬性）

正式語法

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

示例

在此示例中，CSS 檔案除了包含父元素 <body> 的一些樣式外，還包含 <blockquote> 元素的樣式。結果小節中的各種輸出演示了當在 blockquote 規則內為 all 屬性應用不同值時，<blockquote> 元素的樣式如何受到影響。

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;
  margin: 0;
  padding: 0;
}

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 規則內未設定 all 屬性的情況。<blockquote> 元素使用瀏覽器的預設樣式，這會給它一個外邊距，以及樣式表中指定的特定背景和文字顏色。它也表現為一個塊級元素：其後的文字位於其下方。

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 規則中的 all 屬性設定為 initial 時，<blockquote> 元素不再使用瀏覽器預設樣式：它現在是一個行內元素（初始值），其 background-color 是 transparent（初始值），其 font-size 是 medium，其 color 是 black（初始值）。

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

在這種情況下，<blockquote> 元素不使用瀏覽器預設樣式。相反，它從其父元素 <body> 繼承樣式值：它現在是一個塊級元素（繼承值），其 background-color 是 #F0F0F0（繼承值），其 font-size 是 small（繼承值），其 color 是 blue（繼承值）。

D. `all: unset`

<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 規則中的 all 屬性應用 unset 值時，<blockquote> 元素不使用瀏覽器預設樣式。因為 background-color 是一個非繼承屬性，而 font-size 和 color 是繼承屬性，所以 <blockquote> 元素現在是一個行內元素（初始值），其 background-color 是 transparent（初始值），但其 font-size 仍然是 small（繼承值），其 color 是 blue（繼承值）。

E. `all: revert`

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

當 blockquote 規則中的 all 屬性設定為 revert 時，blockquote 規則被視為不存在，樣式屬性值將從應用於父元素 <body> 的值繼承。因此，<blockquote> 元素被設定為一個塊級元素，其 background-color 為 #F0F0F0，font-size 為 small，color 為 blue——所有值都從 body 規則繼承而來。

F. `all: revert-layer`

<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: revert-layer;
}

CSS 檔案中沒有定義層疊層，因此 <blockquote> 元素從匹配的 body 規則繼承其樣式。這裡的 <blockquote> 元素被設定為一個塊級元素，其 background-color 為 #F0F0F0，font-size 為 small，color 為 blue——所有值都從 body 規則繼承而來。此場景是 all 設定為 revert-layer 時行為與 all 設定為 revert 時相同的示例。