通过::selection伪元素可自定义网页选中文本的样式，如颜色和背景色，基本语法为::selection { color: #fff; background-color: #000; }，仅支持color、background-color、cursor及部分浏览器支持的outline和text-shadow，不支持font-size、padding等其他属性。为确保兼容性，需添加厂商前缀::-moz-selection用于Firefox，而其他现代浏览器使用::selection。还可针对特定元素设置，如p::selection { color: green; background: lightblue; }，合理使用能提升视觉体验，但应避免刺眼配色影响阅读。
在网页中，当用户选中文字时，默认会有一个背景色（通常是蓝色）。通过 ::selection 伪元素，你可以自定义被选中文本的样式，比如颜色、背景色等，从而提升页面的视觉体验。
基本语法
使用 ::selection 可以为选中的文本设置样式：
::selection {
color: #fff;
background-color: #000;
}
这段代码会让所有被选中的文字变成白色字体，黑色背景。
支持的CSS属性
在 ::selection 中，并非所有CSS属性都可用。仅支持以下几种：color：修改选中文字的颜色 background-color：修改选中区域的背景色 cursor：一般不常用 outline 和 text-shadow：部分浏览器支持像 font-size、padding 等其他属性是无效的。
兼容性写法
为了确保在更多浏览器中生效，建议加上厂商前缀：
::selection {
color: yellow;
background: blue;
}
::-moz-selection {
color: yellow;
background: blue;
}
Firefox 使用 ::-moz-selection，而其他现代浏览器（Chrome、Edge、Safari）支持标准的 ::selection。
针对特定元素设置
你也可以只为某个元素定义选中样式：
p::selection {
color: green;
background: lightblue;
}
Revid AI
AI短视频生成平台
96 查看详情
立即学习“前端免费学习笔记（深入）”；
这样只有段落内的文字被选中时才会应用该样式。
基本上就这些。合理使用 ::selection 能让页面更个性化，但注意不要设置过于刺眼的颜色组合，以免影响阅读体验。
以上就是css::selection文字选中样式如何自定义的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1035749.html
微信扫一扫 
支付宝扫一扫 
