在早期的 Chrome 版本中,用户可以通过修改本地的 Custom.css 文件来改变网页外观,但现代 Chrome 出于安全和性能考虑,已经取消了这一原生功能。
现在,要启用自定义 CSS 样式表,最常用且最高效的方法是使用扩展程序。以下是几种主流的操作方式:
方法一:使用 Stylus 插件(最推荐,纯净开源)
Stylus 是目前最流行、最轻量级的样式管理工具,它是老牌插件 Stylish 的开源无广告替代品。
- 安装插件:在 Chrome 应用商店搜索并安装 Stylus。
- 创建样式:
- 点击插件图标,选择 “管理” 或直接在访问某个网站时点击 “编写新样式”。
- 你可以为“特定域名”编写样式,也可以编写影响所有网站的“全局样式”。
- 编写代码:在左侧代码框输入 CSS。例如,让所有网页背景变灰:CSS
body { background-color: #f0f0f0 !important; } - 保存生效:点击左上角的 “保存”,网页会实时刷新显示效果。
方法二:使用开发者工具(临时调试)
如果你只是想临时修改当前页面的外观(刷新后失效),不需要安装任何插件。
- 按
F12或Ctrl+Shift+I打开开发者工具。 - 切换到 Sources (源代码) 标签页。
- 在左侧面板找到 Overrides (覆盖)(如果没看到,点击
>>更多图标)。 - 点击 “选择文件夹以进行覆盖”,并在本地创建一个空文件夹。
- 在页面上点击右键选择 “检查”,修改右侧 Styles 面板中的代码,这些修改会被保存到本地,即便刷新页面也会保持生效(只要开启了开发者工具)。
方法三:通过油猴脚本 (Tampermonkey)
如果你已经安装了油猴脚本,也可以通过 JavaScript 动态注入 CSS。
- 脚本示例:JavaScript
(function() { var style = document.createElement('style'); style.innerHTML = `body { filter: grayscale(100%); }`; // 示例:网页变灰 document.head.appendChild(style); })();
Chrome如何启用自定义CSS样式表常见问题
为什么我写的 CSS 没有生效?
多数情况下是因为优先级不够。网页原有的样式通常带有复杂的选择器。
解决方法:在你的 CSS 属性后添加 !important(例如 color: red !important;),或者增加选择器的权重。
在哪里可以找到别人写好的漂亮样式?
你可以访问 UserStyles.world。这是目前主流的样式库,你可以直接搜索“百度”、“GitHub”或“全局深色模式”,一键安装别人优化好的 CSS。
自定义 CSS 会影响浏览器速度吗?
基本不会。浏览器处理 CSS 的速度极快。相比安装复杂的皮肤插件,直接注入几行 CSS 是性能损耗最小的美化方式。



