选中高亮Selection
视觉效果与操作状态设置用户选中文字时的高亮样式
选中高亮是用户拖选文字后看到的前景色和背景色，可以适度加入品牌颜色。必须保证文字对比度，也不要大范围禁止选择，避免影响复制正文和说明。
默认色
拖选一段文字，中间这段就是选中高亮，底色由浏览器决定。
品牌色
拖选一段文字，中间这段就是选中高亮，和品牌色呼应。
什么时候用
- 不折腾也放心：默认蓝底白字清晰可用拖选一段文字，这一段被选中了，默认蓝底白字。
- 换成品牌色呼应：::selection 一处定义，全站生效同一段话，选中色换成品牌色，细节很加分。
- 定制时保证对比度：深底配白字，浅底配深字深底白字 ✓浅底深字 ✓
- 拖拽手柄等纯交互元素可加 user-select: none：防误选保存user-select: none
什么时候不用
- 选中色太浅：用户根本看不清自己选了什么这段话里有一截被选中，你看得出来吗？
- 想点按钮却拖出一片蓝：可点元素记得防误选按钮文字被选中想点按钮，拖一下蓝一片
- 一个页面好几种选中色：东一块西一块像打补丁选区选区选区
- 给正文也加 user-select: none：想复制都选不中正文也加了 user-select: none，想复制一段发给同事，怎么拖都选不中。
组成结构 · Anatomy
前面这段没选中，这段被拖选，后面也没选中
1普通文本Text没被选中的部分，保持原样
2选区Selection鼠标拖选覆盖的那一段范围
3高亮底色Background::selection 的 background
4高亮文字色Color::selection 的 color，和底色对比要够
常见变体 · Variants
默认Default
选中高亮
不想折腾时，系统蓝就够用
品牌色Brand
选中高亮
低成本呼应品牌色的精致感
防误选NoSelect
保存 · user-select: none
按钮、图片、可拖拽卡片上
典型使用场景
文章正文选中复制
把提示词写好的三个习惯
写提示词时，先把目标说清楚，再给出背景。模型并不知道你脑子里想的是什么，所以关键约束要一条一条列明白，别指望它猜。
📋 复制
代码片段选中
1.card {
2 border-radius: 12px;
3 padding: 16px;
4}
按钮拖拽防误选
✕ 想点按钮，一拖蓝一片
✓ user-select: none 防误选
品牌官网的文本选中
MUSEON STUDIO
让好想法被世界看见
选中色 = 品牌色，::selection 一行搞定