使用::selection伪元素可自定义文本选中样式，如设置background-color和color属性改变高亮颜色，支持有限CSS属性，需注意兼容性及浏览器前缀。
在CSS中，想要自定义文本被选中时的高亮颜色，不能使用 selection-color（这是一个不存在的属性），正确的做法是使用 ::selection 伪元素来设置选中文本的背景色和文字颜色。
如何使用 ::selection 设置选中文本样式
::selection 用于指定用户选中文本时的视觉样式，可以设置背景色、文字颜色（即“高亮颜色”）、甚至字体加粗等。以下是基本用法：
::selection { background-color: #ffeb3b; color: #212121;}
上面代码表示：当用户选中文本时，背景变为黄色（#ffeb3b），文字颜色变为深灰色（#212121）。
支持的CSS属性
在 ::selection 中，只能使用有限的几个CSS属性：
立即学习“前端免费学习笔记（深入）”；
color：选中时的文字颜色background-color：选中时的背景色cursorcaret-colortext-shadowbackground（简写）text-emphasis-color
注意：不能使用 margin、padding、font-size 等布局或尺寸相关属性。
兼容性与浏览器前缀
现代浏览器都支持 ::selection，但为了兼容老版本，有时需要添加前缀：
稿定抠图
AI自动消除图片背景
76 查看详情
::-moz-selection { background-color: #ffeb3b; color: #212121;}::selection {background-color: #ffeb3b;color: #212121;}
-webkit- 浏览器（Chrome、Safari、Edge）和现代Firefox都支持标准语法，但旧版Firefox需使用 -moz- 前缀。
实际应用示例
如果你想让整个页面的选中文本更清晰可读：
::selection { background-color: #d14836; /* 红色背景 */ color: white; /* 白色文字 */ text-shadow: 1px 1px 1px #000;}
也可以针对特定元素设置不同的选中样式：
.highlight::selection { background-color: purple; color: yellow;}
这样只有带有 .highlight 类的元素在被选中时才会显示紫色背景和黄色文字。
基本上就这些。记住关键点：没有 selection-color 属性，要用 ::selection 来控制选中文本的颜色和背景。
以上就是css文本高亮颜色selection-color如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022765.html
微信扫一扫 
支付宝扫一扫 
