資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中 revert 和 unset 關鍵字的區別
CSS 是一種強大的工具，它使開發人員能夠根據自己的意願自定義網站的外觀。由於 CSS 提供了眾多功能和屬性，因此開發人員很可能為了達到預期效果而互換使用兩個關鍵字。
因此，瞭解這些容易混淆的關鍵字的詳細資訊非常重要，以避免進一步的錯誤。“revert” 和 “unset” 就是兩個這樣的關鍵字。這兩個關鍵字看起來可能很相似，但在某些元素的某些屬性上卻存在明顯的差異。在這裡，我們將討論這些關鍵字，如何以及何時使用它們，以及它們之間的區別。
Revert 關鍵字
“revert” 關鍵字用於 CSS 中，將級聯樣式值恢復為其繼承值或預設值（如果不存在繼承值），如 CSS 宣告中所定義。
假設您將 “revert” 關鍵字應用於某個屬性（例如 font-weight、margin、color 等）。現在，您的瀏覽器將檢查該屬性從其父元素繼承的值。如果發現該屬性被繼承，則子元素該屬性的值將重置為從父元素繼承的值。而如果該屬性未被繼承，則瀏覽器將為子元素分配預設值（如 CSS 宣告中給出的值）。
示例
讓我們透過一個示例更好地理解這一點。
<html>
<head>
<style>
/* Styles for the parent element */
.parent {
background-color: green;
font-size: 24px;
}
/* Styles for the child elements */
.child1,
.child2 {
background-color: white;
}
.child1 {
color: revert;
font-size: revert;
background-color: revert;
}
</style>
</head>
<body>
<div class="parent">
<p class="child1"> This is the child element with revert keyword. </p>
<p class="child2"> This is the child element without revert keyword. </p>
</div>
</body>
</html>
在上面的示例中，我們將父元素的 background-color 和 font-size 分別設定為 green 和 24px。然後，我們將兩個子元素的 background-color 都設定為 white。之後，我們對 child1 的 color、font-size 和 background-color 使用了 revert 關鍵字。
因此，我們可以看到，對於 child1，font-size 和 background-color 都已重置為從父元素繼承的值。請注意，child1 元素的顏色恢復為 預設值（即 black），因為它未在父元素中宣告。
而 child2 未使用 revert 關鍵字，其 background-color 為 white，text color 為 red。（請注意，這兩個屬性也為 child1 設定了，但由於之後對其使用了 revert 關鍵字，因此這些值已被重置。）
Unset 關鍵字
CSS 中的 unset 關鍵字用於將級聯樣式值恢復為其繼承值或初始值。如果該屬性由父元素繼承，則它將獲取繼承的值。否則，它將重置為初始值。換句話說，如果您為屬性分配了一個與其初始值不同的新值，並將其設定為“unset”，則該屬性的值將設定為該初始值。
這裡，屬性的初始值是指在任何樣式規則應用於它之前，它所具有的原始值。
示例
讓我們看一個示例 -
<html>
<head>
<style>
.parent {
font-family: Algerian;
font-size: 18px;
}
.child {
font-size: unset;
}
</style>
</head>
<body>
<div class="parent">
<p class="child"> This is an example. </p>
</div>
</body>
</html>
在上面的示例中，父元素的 font family 為 Algerian，font size 為 18 pixels。我們可以看到，子元素從其父元素繼承了 font family（即 Algerian）。
但是，由於我們將 font size 值設定為 unset，這意味著該元素將從其父元素繼承 font size（此處為 18 pixels）。
如果子元素在 CSS 宣告中設定了不同的 font size，則 “unset” 關鍵字會將其重置為父元素的值。
Revert 和 Unset 之間的區別
以下是 revert 和 unset 之間的主要區別 -
| Revert | Unset |
|---|---|
revert 關鍵字用於將屬性的值重置為其 繼承 值，或重置為 預設 值（如果它沒有任何繼承值）。如果您在 CSS 宣告中未為該屬性分配任何繼承或預設值，則 revert 關鍵字將不起作用。 |
另一方面，unset 關鍵字使開發人員能夠將屬性的值重置為其繼承值或初始值。此值可能與預設值不同。即使對於沒有初始值的屬性，我們也可以使用 unset 關鍵字。 |
Revert 或 Unset - 選擇哪一個？
如果您有一個具有初始值的屬性，並且希望將其值設定為繼承或預設值，則使用 revert 關鍵字。而如果您希望將屬性重置為其初始值，無論它是否已被分配了不同的值，則使用 unset 關鍵字。
結論
在本文中，我們討論了 CSS 中使用的兩個關鍵字 - revert 和 unset。根據具體情況，它有助於將屬性的值重置為其預設值或繼承值。Revert 關鍵字在 Google 84、Safari 9.1、Opera 70、Microsoft Edge 84 等瀏覽器中受支援。簡而言之，unset 關鍵字用於將值重置為其初始值，而 revert 關鍵字則重置為繼承或預設值。
152 次瀏覽
