revert-layer
revert-layer CSS 範圍關鍵字 將 級聯層 中屬性的值回滾到上一個級聯層中匹配元素的 CSS 規則的屬性值。使用此關鍵字的屬性值將重新計算，就像當前級聯層中沒有為目標元素指定任何規則一樣。
如果沒有其他級聯層可供匹配的 CSS 規則回滾，則屬性值回滾到從當前層派生的計算值。此外，如果當前層中沒有匹配的 CSS 規則，則元素的屬性值回滾到上一個樣式來源中定義的樣式。
此關鍵字可應用於任何 CSS 屬性，包括 CSS 簡寫屬性 all。
revert-layer 與 revert
revert-layer 關鍵字允許您將樣式回滾到 作者來源 中以前的級聯層中指定的樣式。相比之下，revert 關鍵字允許您將作者來源中應用的樣式回滾到使用者來源或使用者代理來源中指定的樣式。
revert-layer 關鍵字最好應用於級聯層內的屬性。但是，如果應用於級聯層外的屬性，它會將屬性值回滾到由表示提示（例如 width 和 height 屬性或 HTML 中的 <s> 元素）設定的任何值，預設為使用者代理樣式表或使用者樣式建立的值。與 revert 關鍵字不同，revert 關鍵字將表示提示視為作者來源的一部分並將其回滾，而 revert-layer 關鍵字會忽略級聯層外的表示提示，因此它不會回滾它們。
示例
預設級聯層行為
在下面的示例中，CSS 中定義了兩個級聯層：base 和 special。預設情況下，special 層中的規則將覆蓋 base 層中的競爭規則，因為在 @layer 宣告語句中，special 列在 base 之後。
HTML
<p>This example contains a list.</p>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
CSS
@layer base, special;
@layer special {
.item {
color: red;
}
}
@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}
結果
所有 <li> 元素都匹配 special 層中的 item 規則並顯示為紅色。這是預設的級聯層行為，其中 special 層中的規則優先於 base 層中的規則。
回滾到上一個級聯層中的樣式
讓我們研究一下 revert-layer 關鍵字如何改變預設的級聯層行為。在此示例中，special 層包含一個額外的 feature 規則，目標是第一個 <li> 元素。此規則中的 color 屬性設定為 revert-layer。
HTML
<p>This example contains a list.</p>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
CSS
@layer base, special;
@layer special {
.item {
color: red;
}
.feature {
color: revert-layer;
}
}
@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}
結果
將 color 設定為 revert-layer 後，color 屬性值將回滾到上一個層 base 中匹配的 feature 規則中的值，因此“專案一”現在是綠色的。
回滾到上一個來源中的樣式
此示例顯示了當沒有級聯層可回滾且當前層中沒有匹配的 CSS 規則可繼承屬性值時，revert-layer 關鍵字的行為。
HTML
<p>This example contains a list.</p>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
CSS
@layer base {
.item {
color: revert-layer;
}
}
結果
所有 <li> 元素的樣式都回滾到使用者代理來源中的預設值。
規範
| 規範 |
|---|
| CSS 級聯與繼承第五級 # revert-layer |
瀏覽器相容性
載入中…