如何使HTML元素不受多个CSS文件的影响

Question

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

js

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。

Answer 1

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

使用新的CSS文件覆盖当前网站's CSS

Answer 2

参考https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity这将有助于你甚至在未来…避免使用!important，因为它可能会影响网页中具有相同类的任何其他元素(罕见情况)。尽量让你的选择器更具体。像. .#container #parent #button.btn_btn_btn将覆盖所有优先级较低的全局样式。