默认情况下，选中文本是蓝底白字——这是浏览器万年不变的高亮样式。但如果你做过品牌化网站，一定会想：能不能把选中颜色换成我的主题色？答案是可以，而且只需要一个伪元素：::selection。

基本用法

css selection.css 
::selection {
  background: #00d4ff;   /* 选中背景色 */
  color: #0d1117;        /* 选中文字颜色 */
}

不带选择器的 ::selection 作用于全站所有文本。也可以只给特定区域设置：

css scoped.css 
h1::selection, h2::selection {
  background: #7c3aed;
  color: white;
}

blockquote::selection {
  background: #22c55e;
}

兼容性写法

Firefox 老版本需要 ::-moz-selection 前缀，稳妥起见两条都写，顺序不能反：

css fallback.css 
::-moz-selection {
  background: #00d4ff;
  color: #0d1117;
}
::selection {
  background: #00d4ff;
  color: #0d1117;
}
⚠️ 注意：不要把带前缀和不带前缀的选择器写在同一条规则里（::-moz-selection, ::selection { ... }），老浏览器解析不了前缀版本会把整条丢弃。

能改哪些属性

::selection 能用的属性非常有限，这是它最大的坑：

属性是否生效
background / background-color✅ 生效
color✅ 生效
text-shadow✅ 生效
text-decoration✅ 生效
border / padding / border-radius❌ 无效
opacity❌ 无效

想给选中区域做圆角、加边框？做不到。这是浏览器实现的限制，规范里就只允许这几类文本相关属性。

实用技巧：半透明选中色

品牌色太实会刺眼，用 rgba 做半透明高亮更柔和，也是大厂官网常见做法：

css soft-selection.css 
::selection {
  background: rgba(0, 212, 255, 0.3);
  /* 不写 color，文字保持原色，只加一层淡色蒙版 */
}

配合暗黑主题

如果网站有 data-theme 双主题，选中颜色也要跟着切换：

css themed.css 
[data-theme="light"] ::selection {
  background: #00d4ff;
  color: #0d1117;
}
[data-theme="dark"] ::selection {
  background: #7c3aed;
  color: #ffffff;
}

总结

::selection 是最便宜的"品牌感"提升手段——一行 CSS，让用户复制文字的瞬间都看到你的主题色。记住三件事：只能用 background / color / text-shadow，Firefox 要写前缀版，半透明比纯色更耐看。

细节里的品牌感，往往不在大标题，而在用户选中一行字的那 0.5 秒。