使用chrome扩展注入CSS更改

Question

我正在编写一些自定义Chrome扩展程序来重新格式化某些网站。我只是简单地隐藏了一些东西，我有很多运气，但是我遇到了一个试图调整右边距的问题。查看HTML结果如下：

<div id="bodyContent2" class="en">

在Chrome开发工具的样式区域中，我看到了

#bodyContent2.en {
  margin-right: 330px;
  min-height: 920px;
  width: auto;
}

如果我手动将其更改为margin-right：0px;使用Chrome，它完全符合我的要求。但是，从我的扩展程序中的manifest.json文件调用时，以下CSS行不起作用：

#bodyContent2 {margin-right:0px;}
[id='bodyContent2']{margin-right:0px;}
#bodyContent2 .en {margin-right:0px;}
.en {margin-right:0px;}

它们都不起作用，我不明白为什么不这样做。我今天刚刚开始使用chrome扩展。非常感谢帮助。在个人尝试中，我看到以下CSS在chrome dev工具中得到了突破：

#bodyContent2 {
    <strike>margin-right: 0px;</strike>
}
.en {
   <strike>margin-right: 0px;</strike>
}

Answer 1

将!important添加到您的规则中，为其提供更高的优先级：

margin-right:0px !important;

如果您想了解应用css规则的顺序，请阅读selector specificity。