在网页浏览过程中，用户用鼠标划选段落文字时，浏览器会自发加上一层背景着色与文字变色，这就是系统或浏览器默认的文本选中态。通过CSS提供的::selection伪元素，开发者可以重写这层样式，让选中效果贴合整体设计语言，而不是突兀地跳出蓝底白字。
一、::selection的基本语法与可用属性
::selection伪元素用来匹配被用户选中或处于高亮状态的文档内容片段。它的写法非常直观，既可以挂在全局选择器上，也能绑定到具体元素。需要强调的是，它并非所有CSS属性都能生效，规范层面仅允许颜色、背景色、文字阴影及部分可继承属性（如text-decoration的颜色部分）被应用，像外边距、边框、定位等布局类属性都会被浏览器忽略。
下面是一段最基础的全站选中样式代码，将选中文本改为深红前景配浅黄背景：
/* 全局选中文本样式 */
::selection {
color: #8b0000;
background-color: #fffacd;
}
/* 兼容旧版火狐 */
::-moz-selection {
color: #8b0000;
background-color: #fffacd;
}
上述代码中，我们同时声明了标准::selection与带前缀的::-moz-selection。在现阶段开发里，主流浏览器均已支持无前缀版本，但若有存量用户使用老版本火狐，保留前缀能防止样式回退到默认蓝底。从实践角度看，把这类全局规则放在样式表开头有助于统一认知，避免后续组件各自覆盖产生冲突。
二、针对局部区域的差异化高亮方案
并非所有板块都适合同一种选中配色。例如代码块区域若使用浅黄背景，可能和语法高亮主题混在一起降低可读性；而引用区块或许希望用品牌色强调。此时可以将::selection挂靠到具体选择器之后，形成局部重写。
以下示例展示如何让普通段落与pre代码块拥有不同选中效果：
/* 文章段落选中态 */
.article p::selection {
background-color: #d1ecf1;
color: #0c5460;
}
/* 代码块选中态，避免和语法色冲突 */
.article pre::selection {
background-color: #343a40;
color: #f8f9fa;
}
这种写法利用了CSS选择器权重，.article pre::selection比全局::selection更具体，因此优先级更高。在调试时，如果发现局部样式没有生效，首先应检查是否被其他更高权重的规则覆盖，或所选元素本身不支持该伪元素（如替换元素）。
另外要注意，::selection不能用于input与textarea内部的选中文本，这类表单控件的选中态由浏览器或操作系统主题接管，CSS无法干预。如果需要统一表单体验，只能从整体页面配色上做协调。
三、常见误区与可用性边界
不少初学者误以为::selection能改变选中文本的字号或加粗，实际上规范明确排除了会影响盒模型与字体度量的属性。如果强行写入font-size或font-weight，浏览器会直接丢弃这些声明，不会报错也只是无效。
另一个容易被忽视的是对比度问题。曾经有项目把选中背景设成纯白、前景也设成白色，导致用户选中后“看不见字”。下面用表格列出两组可用与不可用的搭配建议：
| 背景色 | 前景色 | 评价 |
|---|---|---|
| #ffeb3b | #333333 | 高对比，阅读舒适 |
| #ffffff | #ffffff | 完全不可见，严禁使用 |
| #007bff | #ffffff | 品牌蓝配白，清晰醒目 |
从可用性角度，选中态虽是临时状态，但依旧要满足基本对比度标准。尤其在暗色主题站点，默认的蓝底白字常常刺眼，手动将背景调成半透明深色、文字提亮，会显著缓和视觉冲击。
四、结合主题切换的动态控制
现代站点常提供亮色与暗色主题，::selection也应随之调整。借助CSS自定义属性，可以用极低成本实现联动。
:root {
--select-bg: #fffacd;
--select-fg: #8b0000;
}
[data-theme="dark"] {
--select-bg: rgba(255, 255, 255, 0.2);
--select-fg: #f1f1f1;
}
::selection {
background-color: var(--select-bg);
color: var(--select-fg);
}
这段代码把颜色抽成变量，当data-theme属性切换到暗色时，选中背景变为半透明白、文字变亮，无需重复写选择器。此种模式在组件化开发中尤其好用，主题包只需覆盖变量即可全局生效。
总结来看，::selection是一个小而确定的样式入口，掌握它的属性边界、局部覆盖方式以及主题适配手段，就能在几乎零成本下优化站点的细节体验。写样式时把它当成设计系统的一环，而不是临时补丁，会更利于长期维护。