logo标签列表

谷歌浏览器扩展覆盖 !important

htmlcssgoogle-chrome-extension
5

我试图修改一个网站的布局，但有时网站会使用 !important，是否有一种方法可以覆盖它？我似乎无法弄清如何在页面的 css 文件之后加载 css 内容脚本。

你需要完全覆盖原始CSS还是只修改某些元素/类？例如，完全摆脱原始CSS是否可以（就好像它从未存在过一样）？ - gkalpak
1个回答
4

!important CSS规则可以被以下方式覆盖：

  1. 另一个包含相同选择器的!important规则集，但是在你尝试覆盖的原始规则集之后评估。
  2. 另一个使用比原始规则集选择器更具体的选择器来匹配要修改的元素的!important规则集。
例如，如果一个网站对所有菜单项都有一个规则：
#menu span {
  font-weight: bold !important;
}

您可以通过使用完全相同的选择器 #menu span 来覆盖此规则，但需要确保您的规则在网站样式表之后注入。在 Chrome 扩展程序的 内容脚本 中，可以通过在 document_idle 处注入内容来实现此目的：
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyle.css"],
      "run_at": "document_idle"
    }
  ],
  ...

或者您可以注入一个具有更特定选择器的规则：

#menu span.menu-item {
  font-weight: normal !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接