如何刪除內聯CSS元素樣式（不使用JavaScript）？

Question

我在樣式表文件中為特定的HTML元素分配了樣式，例如

label {
  width: 200px;
  color: red; 
}

在一種特殊情況下，我想在HTML文檔中使用label元素，但是忽略為label元素指定的樣式（僅適用於文檔中的一個實例）。 有什么方法可以以通用的方式實現這一目標， 而又不能用內聯樣式覆蓋元素樣式屬性 ？

<label for="status">Open</label>

重申一下，將元素樣式（寬度200 px，紅色）應用於顯示標簽的HTML代碼。 我希望使用默認的樣式屬性（不知道它們是什么），而不必知道元素樣式設置中專門指定的屬性。

Answer 1

從Mozilla開發人員中心 ：

因為CSS不提供“默認”關鍵字，所以還原屬性默認值的唯一方法是顯式重新聲明該屬性。

因此，在使用選擇器（例如，使用標記名稱的選擇器，如p）編寫樣式規則時，您可能需要使用更具體的規則（例如使用id或class選擇器的規則）覆蓋，因此應格外小心，因為原始默認設置值無法自動恢復。

由於CSS是級聯的，因此優良作法是盡可能具體地定義樣式規則，以防止對不打算樣式化的元素進行樣式化。

Answer 2

  <label ... style = "width: auto; color: inherit" />

Answer 3

<label ... class="default">...</label>


label {
  width: 200px;
  color: red; 
}

label.default {
  width: auto;
  color: inherit; 
}

但是，這可能無法提供理想的結果-另一種方法是為所有其他標簽賦予特定的類，然后不將該類分配給“默認”標簽。

Answer 4

情況在6年中有所變化：現在可以通過使用initial ， unset或revert關鍵字來刪除設置的CSS屬性而無需使用JavaScript。 所有現代瀏覽器均支持這些功能。

Answer 5

我認為您無法將其重置為樣式表中標簽定義之前的狀態，但是可以給標簽提供一個ID並在樣式表中覆蓋它。

<label for="status" id="status-label">Open</label>

label {
  width: 200px;
  color: red; 
}

label#status-label {
  width: auto;
  color: blue; 
}

Answer 6

您可以使用：not選擇器 ：

label:not([for="status"]) {
  width: 200px;
  color: red; 
}

支持似乎可以追溯到2009年（ FF3.5 ）