CSS 中 `all: unset` 和 `all: revert` 之間的主要差異是什麼？

了解CSS 中all: unset 和all: revert 之間的區別

CSS 中的unset 關鍵字有助於將屬性重置為其繼承值如果它從其父級繼承，則傳回其初始值；如果它不繼承，則傳回其初始值。這意味著它的行為類似於第一種情況下的繼承關鍵字，以及第二種情況的初始關鍵字。

另一方面，revert 關鍵字採用略有不同的方法。它將屬性的級聯值從目前值還原為目前樣式原點未對目前元素進行任何變更時應有的值。

現在，讓我們深入研究一下中突出顯示的差異MDN 提供的引用：

瀏覽器和自訂樣式表

unset 和revert 之間的主要區別在於它們對具有由瀏覽器或由瀏覽器設定值的屬性的處理使用者所建立的自訂樣式表（在瀏覽器端設定）。

使用 all: unset 時，瀏覽器設定或使用者設定的屬性值將替換為繼承的值或初始值。相較之下，all: revert 的獨特之處在於它能夠將特定屬性恢復到瀏覽器或使用者樣式表幹預之前的狀態。

範例

考慮以下CSS 片段:

p {
  margin: 50px;
}

讓我們假設此瀏覽器將此預設邊距樣式套用於所有

元素。現在，如果我們使用：

<p></p>

margin 屬性將恢復到原始狀態，就好像瀏覽器沒有套用其預設樣式一樣。

但是，使用：

<p></p>

會將邊距重設為其繼承值，通常為 0。因此，在這種情況下，unset 不會恢復瀏覽器設定的原始邊距，而 revert 則會。

總之，all: unset 專注於將屬性重設為其繼承值或初始值，而 all: revert 則強調在任何瀏覽器或使用者樣式表修改之前將屬性恢復為其原始狀態。

以上是CSS 中 `all: unset` 和 `all: revert` 之間的主要差異是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！