可以通过CSS设置网页中选中文字的颜色及文字背景色；浏览器默认的选中样式大多是深蓝色背景搭配白色文字，这种固定样式在很多个性化网页中会显得格格不入——比如主打清新文艺的文创网站，突兀的深蓝色会打破整体柔和的视觉氛围；而科技感十足的企业官网，默认样式也无法呼应品牌的科技调性。

自定义选中文字样式的意义

很多网站上面，拖动鼠标选中文字后，选中区域的颜色跟网站主题色彩是一样的，这样可以避免浏览器默认的选中背景色与页面主色调出现不协调。像国内的内容平台知乎，选中文字的背景色采用了品牌专属的知乎蓝，既与页面整体色调统一，又能让用户清晰看到自己选中的内容；豆瓣则选用柔和的豆绿色作为选中背景，贴合其文艺社区的定位，这种细节上的优化，能悄悄提升用户的浏览体验，强化品牌记忆点。 实现方式是在样式文件中增加如下代码（选中区域蓝色背景，白色字体）：

CSS实现选中文字样式的代码示例
/* 为兼容不同浏览器添加前缀 */
::selection{background:yellow; color:red; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
::-moz-selection{background:yellow; color:red; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
::-webkit-selection{background:yellow; color:red; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);}

动手尝试验证效果

大家不妨可以试试哦！你可以打开在线代码编辑工具如Codepen，新建一个HTML项目，先输入几段测试文本，再将这段CSS代码写入样式区域，选中文字就能实时看到效果；也可以在本地创建HTML文件，把CSS代码放在