通过::selection伪元素可设置选中文字的样式，语法为::selection { background-color: #007bff; color: white; }，需添加-webkit-和-moz-前缀以兼容旧版浏览器，可限定特定元素如p::selection或.highlight::selection，仅支持color和background-color属性。
设置元素被选中时的文字和背景颜色，可以通过 CSS 的 ::selection 伪元素来实现。这个伪元素用于定义用户用鼠标或键盘选中文本时的高亮样式。
基本语法
使用 ::selection 可以修改选中状态下的文本颜色和背景色：
::selection { background-color: #007bff; color: white;}
兼容性写法
为了兼容不同浏览器（尤其是老版本 WebKit 浏览器），建议加上 -webkit- 前缀：
::selection { background-color: #007bff; color: white;}::-moz-selection {background-color: #007bff;color: white;}
::-webkit-selection {background-color: #007bff;color: white;}
作用于特定元素
如果只想对某个特定元素（如段落、标题）设置选中样式，可以加类名或标签限定：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
立即学习“前端免费学习笔记（深入）”；
p::selection { background-color: yellow; color: black;}.highlight::selection {background-color: red;color: white;}
这样只有带有 .highlight 类的元素在被选中时才会应用红色背景和白色文字。
注意事项
– ::selection 中只能使用 color 和 background-color 两个属性，其他样式无效。
– 不支持渐变、边框、阴影等复杂样式。
– 在 Firefox 中旧版本需使用 ::-moz-selection，新版已支持标准语法。
基本上就这些，简单有效。
以上就是如何用css设置元素选中状态selection颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1008851.html
微信扫一扫 
支付宝扫一扫 
