Chrome扩展CSS不生效：DevTools修改有效但扩展文件无效

问题分析 #

网站原有CSS选择器#content>.side_navigationed.with_sheet>div:nth-child(2)（包含在长选择器列表内）的优先级高于你扩展中使用的.overview.tester或简化版选择器，导致自定义样式无法生效。

解决方案 #

1. 提升选择器优先级

直接使用与网站原有选择器相同或更具体的规则，确保你的样式优先级更高：

#content>.side_navigationed.with_sheet>div:nth-child(2) {
  background-color: red;
  /* 其他深色模式样式 */
}

如果目标元素同时带有.overview.tester类，可进一步增强优先级：

#content>.side_navigationed.with_sheet>div:nth-child(2).overview.tester {
  background-color: red;
}

2. 临时使用!important（谨慎使用）

若需快速验证效果，可在属性后添加!important强制覆盖原有样式，但不建议大规模使用，避免引发后续样式冲突：

.overview.tester {
  background-color: red !important;
}

3. 确保扩展CSS晚于网站样式加载

检查扩展manifest配置，设置CSS注入时机为网站样式加载完成之后：

{
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "css": ["your-styles.css"],
      "run_at": "document_end"
    }
  ]
}

document_end会在DOM加载完成后注入CSS，确保优先级高于网站的内嵌或外部样式。

内容的提问来源于stack exchange，提问作者xAndrula