禁用 CSS 特定 div 中所有元素的樣式？

Question

我的腳本生成用戶的 email 簽名，然后將其顯示在彈出模式中。 我遇到的問題是， modal-body div 還受視圖的 CSS 樣式的影響，這會混淆簽名的外觀和感覺，因此我想禁用 CSS 以查看簽名的無樣式外觀。

是否可以禁用 CSS modal-body div 中所有元素的樣式（p、br、a href 等），go 如何做到最好？

謝謝

Answer 1

您可以將各種 CSS 重置值與all屬性一起使用，以設置幾乎每個屬性的值。

.modal-body {
  all: initial | unset | revert
}

• 屬性默認值的initial值
• 如果是繼承的屬性，則unset屬性默認值或繼承
• revert該元素的默認值（瀏覽器樣式），我認為這里唯一的區別是顯示將是塊而不是 div 元素的內聯。

上面的示例只會設置.modal-body本身的樣式，如果您也想重置其中每個元素的值，您可以執行以下操作：

.modal-body,
.modal-body * {
  all: initial | unset | revert
}

這不僅會針對.modal-body ，還會針對 .modal- .modal-body的每個后代。 小心使用unset以外的值，因為它非常強大，能力越大，責任越大。

如果您仍有問題，您的其他 styles 可能更具體，因此會覆蓋此規則。 您可以嘗試添加!important但是這將需要在您的模態元素的每個重新樣式中使用它。 在這種情況下，我建議為您的模式提供一個 ID 並使用它來設計它的樣式，並通過您的其他 CSS 進行組合以刪除 ID 選擇器以展平特異性。

不確定我是否完全理解您的評論...如果這不是您的意思 HTML，請更新您的問題以包含您的 HTML，我將更新此答案：

<div id="modalSignaturePreview">
  <div class="modal-body"></div>
</div>

無論如何，對於上面的 HTML，您可以使用#modalSignaturePreview.modal-body在 CSS 中定位它，這里我們將所有具有 class modal-body 的元素定位為 ID 為 modalSignaturePreview 的任何元素的后代

Answer 2

聽起來您想要all css 屬性。

.modal-body * {
  all: initial;
}

這里的例子

應該將所有內容返回到用 CSS 修改之前的狀態。 .modal-body *的特異性僅為 0 1 0，因此您可能需要使此選擇器更具體或添加!important 。