如何在浏览器中永久修改远程网站的CSS本地渲染效果？

嘿，我太懂这种烦人的情况了——明明只是想改掉网站上那些碍事的UI（比如hover就挡内容的div），结果Chrome当初说要出的Local Overrides功能拖到现在都没落地，简直磨人。别愁，给你几个亲测好用的替代方案，完全能实现永久修改网站渲染效果的需求：

• Tampermonkey（油猴脚本）：这绝对是最灵活的方案，堪称网页自定义神器。安装这个浏览器扩展后，你可以给特定网站写专属用户脚本，不管是覆盖CSS样式还是调整JS逻辑都能搞定。
  比如要解决hover遮挡的问题，你可以写这样的脚本：

  // ==UserScript==
  // @name         修复Hover遮挡问题
  // @match        https://目标网站域名/*
  // @grant        none
  // ==/UserScript==
  
  (function() {
      'use strict';
      // 创建自定义样式并插入页面
      const customStyle = document.createElement('style');
      customStyle.textContent = `
          /* 替换成你要修改的div类名或选择器 */
          .annoying-hover-div:hover {
              display: none !important;
              /* 也可以用 z-index: -1 !important; 把它压到内容下方 */
          }
      `;
      document.head.appendChild(customStyle);
  })();
  

  脚本会在你访问目标网站时自动生效，完全是永久的，除非你主动删掉脚本。

• Stylus 扩展：如果你只需要修改CSS样式，这个专门的样式管理扩展比油猴更省心。安装后点击扩展图标，就能给当前网站创建自定义样式，直接写CSS规则就行，它会自动保存并在你访问该网站时加载。
  比如针对遮挡div，直接写：

  .annoying-hover-div:hover {
      z-index: -1 !important;
  }
  

  还能一键启用/禁用样式，管理多个网站的自定义规则，界面友好操作简单。

• Chrome 用户自定义样式表：Chrome其实一直支持全局或网站特定的自定义样式，只是路径有点隐蔽。

  1. 找到Chrome的用户数据目录：Windows一般是C:\Users\[你的用户名]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets，Mac是~/Library/Application Support/Google/Chrome/Default/User StyleSheets
  2. 在里面创建（如果没有的话）Custom.css文件
  3. 写入针对目标网站的CSS规则：

     @-moz-document domain(目标网站域名) {
         .annoying-hover-div:hover {
             display: none !important;
         }
     }
     

     这样访问目标网站时，这个样式就会自动应用，不过Chrome新版本对这个功能的细节可能有小调整，基本还是能用的。

• Chrome DevTools 工作区（半持久化）：虽然官方的Local Overrides没正式落地，但DevTools的工作区功能可以实现类似效果，适合调试场景。

  1. 打开DevTools（F12），切换到Sources面板
  2. 右键左侧文件列表，选择「Add folder to workspace」，选择本地一个空文件夹
  3. 找到页面的CSS文件，右键选择「Map to file system resource」，映射到你本地的文件
  4. 修改样式后保存，下次访问网站时DevTools会加载你本地修改后的文件。不过这个需要每次打开DevTools才能生效，不如前面的扩展方案省心。

以上几个方案里，我自己平时最常用的是Tampermonkey（灵活度拉满）和Stylus（专注CSS修改更便捷），完全能解决你遇到的UI遮挡问题。

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