`all: unset` 與 `all: revert`：什麼時候應該使用它們？

CSS 的細微差別：all: unset 與all: revert

了解CSS 關鍵字之間的微妙之處可以提升您的造型能力。在 all: unset 和 all: revert 的情況下，差別在於它們對瀏覽器所應用的樣式表和使用者定義的樣式表的處理。

all: unset

As MDN 中指出，unset 可讓您將屬性重設為其繼承值（如果從其父級繼承）或重設為其初始值（如果不是從其父級繼承）。因此，它模擬前一種情況中的繼承關鍵字和後一種情況中的初始關鍵字。

all: revert

相反，revert 將屬性的級聯值恢復為其狀態沒有對當前元素進行任何修改。這表示它將屬性重設為其繼承值，或者如果不存在，則重設為瀏覽器樣式表或任何適用的使用者樣式設定的預設值。

主要差異

當瀏覽器將預設樣式套用到元素時，就會出現主要差異。使用恢復可以有效地撤銷這些樣式，而取消設定則不能。

插圖

考慮以下HTML 和CSS 程式碼片段：

假設瀏覽器自動將

的預設邊距設為50px元素。在這種情況下，帶有 margin:revert 的段落中的文字將其邊距重設為 0px，從而有效地刪除瀏覽器的預設樣式。另一方面，帶有 margin:unset 的段落內的文字將保留瀏覽器的預設邊距 50px。

以上是`all: unset` 與 `all: revert`：什麼時候應該使用它們？的詳細內容。更多資訊請關注PHP中文網其他相關文章！