HTML+CSS：有沒有辦法讓頁面其余部分的“真空”中的容器（模態）不應用其他樣式？

Question

我下載了一個免費的引導程序模板，它有很多頁面，有很多樣式和腳本。

當我嘗試將 html 容器添加到該頁面（這是一個模式/彈出窗口）時，從正文到標題的所有樣式都適用於它，這完全破壞了它。

因此，因為我不想為所有人創建一個類/ID，並且在不破壞模板流程的情況下無法避免父級和主體 div 樣式上的某些寬度/高度，我想知道是否有一種方法可以創建一個 html 容器有一些選項，如果你添加它，絕對沒有其他樣式適用於它，我可以隨意設置它的樣式，而不管它周圍發生了什么？

z-index 可以在這里工作嗎？

L.EDIT我在 codepen [codepen modal][1]上添加了代碼在這里輸入鏈接描述

模態應該看起來像在代碼筆中，但它像在此屏幕截圖中一樣展開。

Answer 1

您自定義元素的樣式必須比聲明的其他樣式具有更高的特異性。 看看 Emma Bostian 的這篇很棒的文章：

https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style 。

Answer 2

CSS 中有以下屬性：

#Element {
   all: initial;
}

這應該重置父元素的所有樣式，包括放置元素的容器和主體。

試試這個並在之后聲明樣式。