基于文本与背景色自定义::selection选中文本颜色

核心思路 #

给不同配色的页面/区域添加专属类，通过类选择器针对性修改::selection样式，实现不同背景下的反色选中效果。

具体实现步骤 #

1. 给目标区域/页面加类

   • 如果是整页统一配色：在对应页面的<body>标签里添加类，比如深色背景页加class="dark-bg"，浅色背景页加class="light-bg"，中等灰度背景页加class="mid-bg"。
   • 如果是页面内局部区域：给该区域的容器（比如<div>、<section>）添加对应类。

2. 编写对应CSS规则
   将以下代码添加到全局CSS或对应页面的专属CSS中：

   /* 主站默认选中样式（适配#939393背景） */
   ::selection {
       background: #939393;
       color: #ffffff;
   }
   
   /* 深色背景区域（文本为浅色）的选中样式 */
   .dark-bg ::selection {
       background: #ffffff;
       color: #333333;
   }
   
   /* 浅色背景区域（文本为深色）的选中样式 */
   .light-bg ::selection {
       background: #333333;
       color: #ffffff;
   }
   
   /* 中等灰度背景区域的选中样式（可根据实际颜色调整） */
   .mid-bg ::selection {
       background: #ffffff;
       color: #222222;
   }
   

针对Cargo平台的特殊处理 #

如果无法直接编辑元素的class，可针对单页单独设置CSS：

• 打开目标页面的自定义CSS设置，直接覆盖全局::selection样式即可，比如白色背景页的代码：

  ::selection {
      background: #333333;
      color: #ffffff;
  }
  

注意事项 #

• 选色时保证文本与背景的对比度至少达到4.5:1，提升可读性。
• 类名可根据自己的配色习惯修改，只要CSS里的类名和HTML中的一致就行。

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