本文介绍如何通过CSS代码自定义子比主题中鼠标选中文字的背景色和文字颜色。所有修改均在后台自定义CSS中完成，无需修改主题核心文件，升级主题时效果不会丢失。

适用人群：使用 Zibll 子比主题并希望优化网站交互细节的 WordPress 站长

核心价值：通过极简的CSS代码，自定义鼠标选中文字时的背景色与文字颜色，让网站细节与品牌色调保持一致。

操作前准备

在开始配置之前，需要先确认以下几点：

• 无需修改主题文件：所有效果均通过后台自定义CSS实现，升级主题时效果不会丢失。
• 操作入口：WordPress后台 → 「Zibll子比主题」→「主题设置」→「全局&功能」→「自定义代码」→「自定义CSS样式」。
• 备份建议：在添加任何自定义代码前，建议先备份网站。

核心CSS代码

以下是实现自定义鼠标选中文字颜色的核心代码，直接复制粘贴即可使用：

说明：::selection 是CSS伪元素，用于控制用户选中文本时的样式。::-moz-selection 是Firefox浏览器的兼容写法。

操作步骤

进入自定义CSS设置

• 登录 WordPress 后台。
• 进入 「Zibll子比主题」→「主题设置」。
• 在左侧菜单找到 「全局&功能」，点击 「自定义代码」 选项卡。
• 找到 「自定义CSS样式」 文本框。

粘贴代码并保存

• 将上方核心代码完整复制。
• 粘贴到 「自定义CSS样式」 文本框中。
• 点击页面底部的 「保存设置」 按钮。

刷新前台查看效果

• 打开网站首页。
• 用鼠标选中任意一段文字，查看选中后的背景色和文字颜色是否已变化。

颜色自定义说明

参数	说明	可调整值
background	选中时的背景色	任意十六进制颜色代码，如 #ff5e5c（红色）、#1ac756（绿色）
color	选中时的文字颜色	任意十六进制颜色代码，如 #ffffff（白色）、#333333（深灰）

常用配色示例

本站常用版

功能验证

配置完成后，建议进行以下验证：

验证步骤

• 保存配置：确保已点击「保存设置」按钮。
• 刷新前台：打开网站首页。
• 选中文字：用鼠标在页面上选中任意文字，观察背景色和文字颜色是否已更新。
• 测试不同区域：在文章内容、标题、侧边栏等不同区域分别测试，确认效果一致。

排障指引

如效果未生效，请依次检查：

• CSS代码是否完整复制、无遗漏
• 是否粘贴在 「自定义CSS样式」 文本框（而非「自定义JavaScript代码」）
• 是否已点击 「保存设置」 按钮
• 浏览器缓存是否已清除（按 Ctrl+F5 强制刷新）

常见问题

问题	解决方法
选中颜色未生效	检查代码是否粘贴在「自定义CSS样式」中；清除浏览器缓存后刷新
颜色不理想	修改 background 和 color 的颜色代码即可调整配色
Firefox浏览器不生效	确认已添加 ::-moz-selection 兼容代码
升级主题后效果丢失	代码保存在主题设置的自定义代码中，升级主题不会丢失
只想让特定区域生效	可在 ::selection 前添加更具体的选择器，如 .entry-content ::selection