通过::selection伪元素可自定义网页文本选中样式，支持color、background-color、text-shadow等属性，示例中设置全局选中文字为白色、背景蓝色（1. ::selection { color: white; background-color: #007acc; }），也可针对特定元素如带highlight类的段落设置黄字红底（2. p.highlight::selection { color: yellow; background-color: red; }），或为h1、code分别设定不同高亮风格，现代浏览器均支持该特性，建议作为顶层规则书写以确保生效。
当用户在网页中选中文本时，浏览器会默认给选中的文本添加背景色（通常是蓝色）。通过CSS的::selection伪元素，我们可以自定义这部分高亮样式，提升页面视觉体验和品牌一致性。
::selection 伪元素简介
::selection用于设置用户选中文本时的样式。它只能应用有限的CSS属性，主要包括：
color：改变选中文字的前景色 background-color：设置选中区域的背景色 text-shadow：为文字添加阴影效果 cursor：虽然不常用，但某些浏览器支持修改光标样式
注意：::selection不能设置边框、字体大小或变换等复杂样式。
基本用法示例
以下是一个基础的文本高亮样式定制：
立即学习“前端免费学习笔记（深入）”；
::selection { color: white; background-color: #007acc;}
这段代码会让所有被选中的文本显示为白色文字，背景为蓝色。
针对特定元素定制选中样式
如果只想对某个容器内的文本生效，可以结合选择器使用：
Cowriter
AI 作家，帮助加速和激发你的创意写作
107 查看详情
p.highlight::selection { color: yellow; background-color: red;}
这样只有带有highlight类的段落中文本被选中时，才会显示黄字红底的效果。
也可以分别设置不同元素的选中风格：
h1::selection { background: pink;}code::selection { background: lightgray; color: black;}
兼容性与注意事项
现代浏览器普遍支持::selection，但旧版IE（IE8及以下）不支持。为了更好的兼容性，部分开发者仍会同时写::-moz-selection（Firefox早期语法），但现在已不再必要。
需要注意的是，::selection不能嵌套在其他规则内（如媒体查询中），否则可能失效。应将其作为顶层规则书写。
基本上就这些。合理使用::selection能让页面细节更精致，尤其适合博客、文档类网站提升阅读体验。
以上就是CSS伪元素::selection文本高亮样式控制_选中文本样式定制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/946939.html
微信扫一扫 
支付宝扫一扫 
