如何实现每次访问网站时自动应用自定义修改的CSS样式？

嘿，完全不用不好意思！这个需求太接地气了——谁长期盯着全白网站眼睛都遭不住，而且你已经想到用检查元素改CSS，这已经很棒了😉。下面给你两种简单易上手的方法，适合编程新手，能让自定义CSS每次访问网站时自动加载：

方法一：用浏览器扩展（最简单，零代码门槛） #

推荐用Stylus这个扩展，它专门用来给网站自定义样式，主流浏览器（Chrome、Edge、Firefox）都支持：

• 打开浏览器的扩展商店，搜索「Stylus」并安装
• 访问你的学校网站，点击浏览器右上角的Stylus图标，选择「为此网站创建样式」
• 在弹出的编辑器里，输入你想要的CSS代码。举个深色主题的例子：

  body {
      background-color: #1a1a1a !important; /* 深色背景 */
      color: #f0f0f0 !important; /* 浅色文字 */
  }
  /* 可以继续添加其他元素的样式，比如导航栏 */
  .school-navbar {
      background-color: #2d2d2d !important;
  }
  

• 点击编辑器右上角的「保存」按钮，搞定！之后每次访问这个网站，你的自定义样式都会自动生效

小提示：!important是用来强制覆盖原网站的样式，避免你的CSS被原网站的样式压过，新手可以放心加上。

方法二：用油猴脚本（更灵活，适合想尝试一点点代码的你） #

如果想体验下简单的脚本逻辑，可以用Tampermonkey（油猴）扩展，它能自动在指定网站运行自定义脚本：

• 安装Tampermonkey扩展（同样在浏览器扩展商店搜索即可）
• 点击扩展图标，选择「创建新脚本」
• 删掉默认的模板代码，替换成下面的内容：

  // ==UserScript==
  // @name         学校网站深色主题
  // @namespace    http://tampermonkey.net/
  // @version      0.1
  // @description  自动给学校网站加上深色主题
  // @author       你的名字
  // @match        https://你的学校网站域名/*  /* 替换成实际的网站地址，比如https://school.edu/* */
  // @grant        none
  // ==/UserScript==
  
  (function() {
      'use strict';
      // 创建一个style标签，把我们的CSS塞进去
      const customStyle = document.createElement('style');
      customStyle.textContent = `
          body {
              background-color: #1a1a1a !important;
              color: #f0f0f0 !important;
          }
          /* 这里可以继续添加更多你想修改的元素样式 */
          .content-box {
              background-color: #2d2d2d !important;
              border: none !important;
          }
      `;
      // 把style标签加到页面头部，让样式生效
      document.head.appendChild(customStyle);
  })();
  

• 把@match后面的网址改成你学校网站的域名（比如https://xxx.edu.cn/*，星号表示匹配该域名下的所有页面），然后保存脚本
• 刷新学校网站，你的自定义CSS就自动加载啦

新手小技巧 #

如果你不知道要改哪些元素的样式，可以用浏览器的「检查元素」功能（右键页面→检查，或者按F12），找到你想修改的部分，看它的类名或标签，然后在CSS里写对应的样式就行。比如想改标题颜色，找到标题的类是.page-title，就写.page-title { color: #4ecdc4 !important; }

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