解决 Firefox 浏览器网页文本选中高亮不明显问题(含仅修改特定网站高亮显示的方案)

解决 Firefox 浏览器网页文本选中高亮不明显问题(含仅修改特定网站高亮显示的方案)

我在使用 Firefox 浏览网页时,经常会遇到选中文本高亮颜色过浅、几乎看不清选中了哪些字 的情况;在访问一些自带前端样式(如通义千问 Qwen 等 AI 聊天页面)的页面时,默认高亮还可能会被网站自带的 CSS 覆盖。

本文整理了两种解决途径:原生 userContent.css 定制(无需插件) 与 Stylus 扩展方案(即时生效)。


方案一:通过原生 userContent.css 自定义(推荐方法,免插件)

Firefox 允许用户通过本地样式表覆盖所有网页样式。

第一步:开启样式自定义开关

  1. 在火狐地址栏输入 about:config 并按回车,点击"接受风险并继续":

  2. 在页面顶部的搜索框中输入:

text 复制代码
toolkit.legacyUserProfileCustomizations.stylesheets
  1. 双击该项(或点击右侧切换按钮),将其值修改为 true。

第二步:定位配置文件夹

  1. 在浏览器顶部地址栏 (⚠️注意,不是 在 about:config 页面中)输入 about:support 并回车。
  2. 找到 配置文件文件夹 (Profile Folder)一栏,点击右侧的 打开文件夹 (系统会自动打开文件资源管理器)。

第三步:创建样式文件

  1. 在打开的配置文件夹内,新建一个文件夹,命名为 chrome(全小写)。
  2. 进入 chrome 文件夹,新建一个文本文件并命名为 userContent.css。

⚠️建议在 Windows 文件资源管理器中开启"文件扩展名显示 ",避免实际文件名为 userContent.css.txt。

第四步:写入 CSS 样式并重启

  • 全局生效(所有网页):
css 复制代码
::-moz-selection {
    background-color: #0078d4 !important; /* 选中文本背景色 */
    color: #ffffff !important;           /* 选中文本文字颜色 */
}
::selection {
    background-color: #0078d4 !important;
    color: #ffffff !important;
}
  • 仅针对通义千问等特定网站生效:
css 复制代码
@-moz-document domain("chat.qwen.ai"), domain("://aliyun.com") {
    *::selection {
        background-color: #2563eb !important; /* 高亮亮蓝 */
        color: #ffffff !important;
    }
    *::-moz-selection {
        background-color: #2563eb !important;
        color: #ffffff !important;
    }
}

保存文件后,重启(关闭所有标签页并重新打开) Firefox 即可生效。


方案二:使用 Stylus 扩展(即时调试、操作简单)

如果不想折腾本地文件或需要经常修改样式,也可以使用轻量级样式管理扩展 Stylus。

  1. 在 Firefox 附加组件商店搜索并安装 Stylus 。

  2. 打开目标网页(例如通义千问),点击右上角 Stylus 插件图标。

  3. 点击"为此 URL 编写样式"下方的目标域名。

  4. 在右侧编辑器中粘贴以下代码:

css 复制代码
*::selection {
    background-color: #0066ff !important;
    color: #ffffff !important;
}
  1. 点击左侧 保存,无需刷新即可实时看到高亮效果。

附:高对比度常用配色推荐

针对深色模式(Dark Mode)或浅色网页,可根据视觉喜好替换上述代码中的颜色值:

  • 经典亮蓝 :background-color: #0078d4 !important; color: #ffffff !important;
  • 荧光黄底黑字(超高对比度) :background-color: #ffe600 !important; color: #000000 !important;
  • 亮橙色底白字 :background-color: #ff6600 !important; color: #ffffff !important;
  • 青蓝色 :background-color: #0ea5e9 !important; color: #ffffff !important;
相关推荐
IT_陈寒7 分钟前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端
Mh18 分钟前
如何使用双缓冲优化视频切换
前端
risenav25 分钟前
低头蓄力,抬头起跳:《萤虫跳跳》的 Rokid AIUI 开发实战
前端
ZhengEnCi40 分钟前
如何看待 Fable 5.2 用纯代码生成 1.4MB 视觉作品:光追、水面、倒影、火光的程序化生成原理
前端
再吃一根胡萝卜1 小时前
DSH 插件的 Host 与 Client:为什么「只加载了 Host」,以及要不要自己写 Client 加载器
前端
parade岁月2 小时前
AI 写的前端代码为什么总像 5 年前的?Chrome 官方出手了
前端
tryCbest2 小时前
Vue系列——第 15 篇:内置组件全家桶——Transition、Teleport、Suspense、KeepAlive
前端·vue.js
易师傅2 小时前
技术面试已死?AI 时代,真正拉开程序员差距的是什么?
前端·后端·程序员
jay神3 小时前
基于深度学习的交通流量预测系统(Web 版)
前端·人工智能·深度学习·yolo·计算机毕业设计
AiMan3 小时前
别再把秘塔会话逐个点开:这可把秘塔多个会话一次导出?AI导出鸭
前端·后端·面试