如何隔离html元素不受多个css文件的影响[重复]答案

【问题标题】：how to isolate html element from being affected by multiple css files [duplicate]如何隔离html元素不受多个css文件的影响[重复]
【发布时间】：2021-06-01 13:41:45
【问题描述】：

我有一个将 HTML 代码插入网页的 chrome 扩展，但它的设计受到主机网页的 css 的影响。

var button = document.createElement("button ");
button.id = "btn_btn_btn";
button.innerText = "pres button";

document.getElementsByTagName("html")[0].prepend(button);

css

#btn_btn_btn{
   background-color: rgb(229, 97, 97) !important;
   border: none !important;
   height: 100px !important;
   color: white !important;
   font-size: 15px !important;
   text-align: center !important;
}

有没有办法让它只受我的 css 文件影响，而不给元素可以拥有的每个属性添加重要性。

【问题讨论】：

除非您可以使用比网页使用的更具体的选择器，否则您必须使用 !important 覆盖它们的样式。

标签： javascript html css google-chrome-extension

【解决方案1】：

请参考https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity，这甚至会在将来对您有所帮助。避免!important，因为它可能会影响网页中具有相同类的任何其他元素（极少数情况）。尝试使您的选择器更具体.. 像.. #container #parent #button.btn_btn_btn 它将覆盖所有优先级较低的全局样式。

【讨论】：

【解决方案2】：

5年前有一个类似的帖子，它有答案

Use a new CSS file to override current website's CSS

【讨论】：