自定义网页中被选中文本的样式 CSS selection

news2024/11/25 6:42:38

文章目录

- 两张图
- 自定义被选中文本的样式
- `::selection` 选择器的可填属性
- - `::selection` 选择器支持的CSS属性完整版 demo
- 浏览器兼容
- 官网文档

两张图

对于选中的文本(准确地说应该是被选中的DOM元素)，浏览器的默认样式：淡青色的背景色。
2. 自定义样式：我改成了豆沙绿的背景色+红色的字体。

自定义被选中文本的样式

如果是你自己的项目，可以使用如下CSS：

::selection {
  background-color: rgba(199, 237, 206);
  color: red;
}

如果是一些在线的网站，你总不能修改人家的代码吧？
是不能。
但是你可以修改已经发到客户端(也就是你自己的电脑)上的网页的代码(这个操作不影响服务端，只对你自己有效！)。
按F12打开 devtools 在 Element 中找到 <head> 中的任意一个 <style> 标签，添加一段你需要的CSS即可：
::selection { background-color: rgba(199, 237, 206); color: red; }

`::selection` 选择器的可填属性

在 ::selection 选择器下可以写哪些CSS属性？不是所有。
官网上说有以下几种：

在这里插入图片描述

`::selection` 选择器支持的CSS属性完整版 demo

在这里插入图片描述

::selection {
  color: red;
  background-color: rgba(199, 237, 206);
  text-decoration: green wavy underline;
  // text-shadow: 1px 1px 2px grey;
}

缩写成一行：
::selection { color: red; background-color: rgba(199, 237, 206); text-decoration: green wavy underline; }

浏览器兼容

NOTE：移动端口的Safari浏览器不支持 ::selection 选择器。

在这里插入图片描述

官网文档

MDN 文档比较全 https://developer.mozilla.org/en-US/docs/web/css/::selection
w3schools 几乎啥都没有
https://www.w3schools.com/cssref/sel_selection.php

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/68735.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！