revert

Baseline 已廣泛支援

此特性已經十分成熟，可在許多裝置和瀏覽器版本上使用。自 2020 年 7 月以來，它已在各大瀏覽器中可用。

revert CSS 關鍵字將屬性的層疊值從當前值恢復為如果當前樣式源未對當前元素進行任何更改時該屬性應有的值。因此，它將屬性重置為使用者代理設定的值、使用者設定的值、其繼承值（如果可繼承）或初始值。它可以應用於任何 CSS 屬性，包括 CSS 簡寫屬性 all。

此關鍵字將從層疊中移除所有已被覆蓋的樣式，直到回滾到的樣式。

如果由網站自己的樣式（作者源）使用，revert 會將屬性的層疊值回滾到使用者的自定義樣式（如果存在）；否則，它會將樣式回滾到使用者代理的預設樣式。
如果在使用者的自定義樣式表中使用，或者樣式由使用者應用（使用者源），revert 會將層疊值回滾到使用者代理的預設樣式。
如果在使用者代理的預設樣式中使用，此關鍵字在功能上等同於 unset。

在許多情況下，revert 關鍵字與 unset 的工作方式完全相同。唯一的區別在於那些由瀏覽器或使用者建立的自定義樣式表（在瀏覽器端設定）設定了值的屬性。

Revert 不會影響應用於你重置的元素的子元素的規則（但會移除父規則對子元素的影響）。因此，如果你為所有 section 設定了 color: green，並在特定 section 上設定了 all: revert，則該 section 的顏色將為黑色。但是如果你有一條規則將所有段落設定為紅色，那麼所有段落仍將在所有 section 中顯示為紅色。

注意：Revert 只是一個值。仍然可以使用特異性覆蓋 revert 值。

注意：revert 關鍵字與 initial 關鍵字不同，不應混淆，後者使用 CSS 規範按屬性定義的初始值。相反，使用者代理樣式表根據 CSS 選擇器設定預設值。

例如，display 屬性的初始值是 inline，而普通的使用者代理樣式表將 <div> 的預設 display 值設定為 block，將 <table> 的預設值設定為 table，等等。

示例

Revert 與 unset

儘管 revert 和 unset 相似，但對於某些元素的某些屬性，它們有所不同。

因此在下面的示例中，我們設定了自定義的 font-weight，但隨後嘗試在 HTML 文件中內聯 revert 和 unset 它。revert 關鍵字會將文字恢復為粗體，因為這是大多數瀏覽器中標題的預設值。unset 關鍵字將使文字保持正常，因為作為繼承屬性，font-weight 將從 body 繼承其值。

HTML

html

<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

CSS

css

h3 {
  font-weight: normal;
  color: blue;
}

結果

全部恢復

在進行了一些樣式更改後，如果你想恢復到瀏覽器預設值，則恢復所有值會很有用。因此在上面的示例中，你無需分別恢復 font-weight 和 color，而是可以透過將 revert 關鍵字應用於 all 來一次性恢復它們。

HTML

html

<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>

CSS

css

h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

結果

在父元素上恢復

恢復會有效地移除你使用某些規則選擇的元素的值，並且這僅對該元素髮生。為了說明這一點，我們將為 section 設定綠色，為 paragraph 設定紅色。

HTML

html

<main>
  <section>
    <h3>This h3 will be dark green</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be dark green.
  </section>
  <section class="with-revert">
    <h3>This h3 will be steelblue</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be steelblue.
  </section>
</main>

CSS

main {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}

css

main {
  color: steelblue;
}
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

結果

請注意，即使 section 的 color 屬性已恢復，段落仍然是紅色的。另請注意，標題和純文字節點都是 steelblue。恢復的結果是，對於應用了 color: revert 的 section，section { color: darkgreen; } 彷彿不存在。

此外，如果使用者代理和使用者都沒有覆蓋 <h3> 或 <section> 的顏色值，那麼 steelblue 顏色將從 <main> 繼承，因為 color 屬性是可繼承屬性。

規範

規範
CSS 層疊與繼承第四級 # default

瀏覽器相容性

另見

使用 initial 關鍵字將屬性設定為其初始值。
使用 inherit 關鍵字使元素的屬性與其父元素相同。
使用 revert-layer 關鍵字將屬性重置為在先前層疊層中建立的值。
使用 unset 關鍵字將屬性設定為其繼承值（如果可繼承）或其初始值（如果不可繼承）。
all 屬性允許你一次性將所有屬性重置為它們的初始、繼承、恢復或未設定狀態。

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者在 2025 年 10 月 1 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題