INTERACTION
文字选中样式::selection Styling
用户划选文字时的高亮颜色——一行 CSS 的小细节，藏着品牌感。
效果预览
用鼠标划选这段文字，会变成品牌紫底白字。
这一段选中后是荧光黄。
这一段选中后是樱花粉。
↑ 现在就用鼠标划选试试适合用在哪
所有网站。品牌色系站点的必配小料。
容易踩的坑
- 选中底色与字色对比度低于 4.5:1，用户划词后反而看不清文字。
- 暗色模式沿用浅色模式的选中色，深底上品牌色 20% 底几乎看不见。
- 对 ::selection 设置 background 却漏设 color，部分浏览器字色变白不可读。
设计提示词 · Prompt
文字选中样式（::selection）：::selection { background: 品牌色; color: 反白 }，还可以定制 text-shadow。深色品牌站选中用品牌亮色底 + 白字；浅色站用品牌色 20% 底 + 原字色。不同区块可用不同选中色（正文蓝、代码块绿）增加玩味。务必保证选中文本的对比度可读（WCAG）。这是最容易被忽略却最显用心的细节之一——用户划词分享时看到的颜色就是品牌色。
Text Selection Styling (::selection): ::selection { background: brand color; color: inverted white }; text-shadow can also be customized. On dark brand sites, use a bright brand background + white text for selections; on light sites, use a 20% brand-color background + the original text color. Different sections can use different selection colors (blue for body text, green for code blocks) for extra playfulness. Always ensure selected text keeps readable contrast (WCAG). This is one of the most overlooked yet most thoughtful details — the color users see when selecting text to share is your brand color.
常见搭配
同一页面里经常和「文字选中样式」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-seldemo"> <p><span class="sel-brand">用鼠标划选这段文字，会变成品牌紫底白字。</span></p> <p><span class="sel-yellow">这一段选中后是荧光黄。</span></p> <p><span class="sel-pink">这一段选中后是樱花粉。</span></p> <span class="d-seldemo__tip">↑ 现在就用鼠标划选试试</span> </div>