html - 谷歌浏览器扩展覆盖!重要

Question

我正在尝试修改网站的布局，但有时网站会使用 !important，有没有办法覆盖它？我似乎无法弄清楚如何在页面的 css 文件之后加载 css 内容脚本。

Answer 1

!important CSS 规则可以被覆盖:

1. 另一个 !important 规则包含在一个规则集中，它使用相同的选择器但在您试图覆盖的原始规则集之后被评估。
2. 规则集中包含的另一个 !important 规则使用的选择器与您尝试修改的元素相匹配，但比您尝试覆盖的原始规则集选择器更具体。

---

例如，如果网站对所有菜单项都有规则:

#menu span {
  font-weight: bold !important;
}

您可以使用完全相同的选择器 #menu span 覆盖此规则，但需要确保您的规则是在网站样式表之后注入(inject)的。在 chrome 扩展的 content script 中这可以通过在 document_idle 注入(inject)您的内容来实现:

  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyle.css"],
      "run_at": "document_idle"
    }
  ],
  ...

或者，您可以使用更具体的选择器注入(inject)规则:

#menu span.menu-item {
  font-weight: normal !important;
}