如何在网站加载前禁用原有CSS文件？

核心问题根源 #

你遇到的是**FOUC（Flash of Unstyled Content）**问题：Tampermonkey默认在DOMContentLoaded阶段运行脚本，此时旧CSS已经开始加载甚至生效，移除操作滞后导致短暂样式混乱；再加上旧CSS大量使用!important，会暂时覆盖自定义样式，进一步加剧闪烁。

解决方案步骤 #

1. 提前脚本运行时机 #

把Tampermonkey脚本的运行时机改为document-start，让脚本在HTML开始解析、任何外部资源（包括旧CSS）加载前就执行，从源头拦截旧CSS生效。

在脚本元数据中添加：

// @run-at       document-start

2. 用原生JS立即禁用/移除旧CSS #

避免依赖jQuery（它在document-start阶段可能还未加载），直接用原生JS操作——优先设置disabled=true，这会立即阻止CSS生效，比直接remove()更及时。

3. 监听动态加载的旧CSS #

部分老旧论坛会通过JS动态插入CSS链接，需要用MutationObserver监听<head>的变化，确保所有新增的旧CSS都被即时处理。

完整脚本示例 #

// ==UserScript==
// @name         替换老旧论坛样式
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  禁用旧CSS并加载自定义样式，避免闪烁
// @author       你的名字
// @match        https://你的论坛地址/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 处理已存在的旧CSS
    function handleOldCSS() {
        const oldStyleLinks = document.querySelectorAll('link[href*="static"]');
        oldStyleLinks.forEach(link => {
            link.disabled = true; // 立即禁用，阻止样式生效
            link.remove();        // 从DOM移除
        });
    }

    // 监听head中新增的元素，拦截动态加载的旧CSS
    const headObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'LINK' && node.href.includes('static')) {
                    node.disabled = true;
                    node.remove();
                }
            });
        });
    });

    // 初始化监听和处理逻辑
    if (document.head) {
        headObserver.observe(document.head, { childList: true });
        handleOldCSS();
    } else {
        // 等待head节点生成
        const checkHeadInterval = setInterval(() => {
            if (document.head) {
                clearInterval(checkHeadInterval);
                headObserver.observe(document.head, { childList: true });
                handleOldCSS();
            }
        }, 10);
    }

    // 注入自定义样式（如果不是通过Greasyfork的userStyle单独加载）
    function injectCustomCSS() {
        const customStyle = document.createElement('style');
        customStyle.textContent = `
            /* 这里替换为你的自定义样式代码 */
            body { background-color: #f5f5f5 !important; }
            .old-forum-post { padding: 12px; border-radius: 4px; }
            /* 更多样式... */
        `;
        document.head.appendChild(customStyle);
    }

    // 确保自定义样式在旧CSS处理完成后加载
    setTimeout(injectCustomCSS, 0);
})();

额外说明 #

• 如果你的自定义样式是通过Greasyfork的UserStyle单独发布的，确保UserStyle的加载时机也设置为document-start（编辑UserStyle时可配置），和脚本拦截逻辑同步。
• 优先用disabled=true而非直接remove()，即使链接还在加载中，禁用操作也会阻止浏览器解析应用该CSS，彻底避免样式生效。

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