使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色

  1. 定义 ::selection 伪元素
    在你的 CSS 文件中,添加 ::selection 伪元素,并设置 background-color 属性来改变选中文本的背景颜色。

  2. 示例代码

    ::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black; /* 可选:更改选中文本的颜色 */
    }
    
  3. 注意事项

    • ::selection 伪元素在不同的浏览器中可能会有细微的差异,但大多数现代浏览器都支持它。
    • 你可以为不同的元素设置不同的 ::selection 样式,但通常情况下,全局设置就足够了。

通过以上步骤,可以轻松地改变 HTML 文本选中时的背景颜色。

全局设置::selection

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>改变文字选中时的背景颜色</title><style type="text/css">::selection { background:#0aebef; color: #000;color:#fff; } ::-moz-selection { background:#0aebef;color: #000; color:#fff;} /*火狐浏览器*/::-webkit-selection { background:#0aebef; color: #000; color:#fff;} /*谷歌*/</style>
</head>
<body><p>选中的颜色</p><p>选中的颜色</p><p>选中的颜色</p><p>选中的颜色</p><p>选中的颜色</p>
</body></html>

运行效果:
全局设定

局部设置::selection

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>改变文字选中时的背景颜色</title><style type="text/css">.cyan::selection { background:#0aebef; color: #000;color:#fff; } .red::selection { background:#ff0000; color: #000;color:#fff; }.blue::selection { background:#0000ff; color: #000;color:#fff; }.purple::selection { background:#800080; color: #000;color:#fff; }.golden::selection { background:#ffd700; color: #000;color:#fff; }</style>
</head>
<body><p class="cyan">选中的颜色</p><p class="red">选中的颜色</p><p class="blue">选中的颜色</p><p class="purple">选中的颜色</p><p class="golden">选中的颜色</p>
</body></html>

局部设定

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Kafka 消息队列深度解析与应用】

Kafka 消息队列深度解析与应用 一、Kafka 概述 &#xff08;一&#xff09;产生背景 Kafka 最初是由 LinkedIn 开发&#xff0c;旨在解决其内部海量数据的实时传输问题。在现代大数据环境下&#xff0c;企业需要处理海量的数据流入和流出&#xff0c;包括用户的行为数据、系…

【测试】接口测试

长期更新好文,建议关注收藏! 目录 接口规范接口测试用例设计postmanRequests封装接口自动化框架实例复习HTTP超文本传输协议 复习cookie+session 实现方式 1.工具 如postman ,JMeter(后者功能更全) 2.代码 python+requests / java+httpclient【高级】接口规范 传统接口 RE…

MATLAB关于集合的运算(部分)

集合运算比较两个集合中的元素&#xff0c;以找出共性或差异 i n t e r s e c t intersect intersect表示两组数据的交集 i s m e m b e r ismember ismember表示查找数据的集合成员 u n i o n union union表示两个数据集的并集 u n i q u e unique unique表示查找数据集的…

与你共度的烟火日常

见过不少人、经过不少事、也吃过不少苦&#xff0c;感悟世事无常、人心多变&#xff0c;靠着回忆将往事串珠成链&#xff0c;聊聊感情、谈谈发展&#xff0c;我慢慢写、你一点一点看...... 我和她一起收拾完屋子&#xff0c;忙完已经中午了。她说&#xff1a;“咱们去趟超市吧&…

【每日学点鸿蒙知识】无障碍、getLastLocation、蓝牙问题、卡片大小、关系型数据库等

1、是否有类似无障碍辅助相关的API&#xff1f; 场景描述&#xff1a;锁机app&#xff0c;需要通过无障碍能力辅助检测当前正在打开的app&#xff0c;以及模拟用户操作&#xff0c; 关闭用户想要屏蔽的app 可参考&#xff1a;https://developer.huawei.com/consumer/cn/doc/h…

Postman[7] 内置动态参数及自定义的动态参数

postman 内置动态参数和自定义的动态参数 1.内置动态参数 格式&#xff1a;{{$参数名}} 1.1时间戳 {{$timestamp}} //生成当前时间的时间戳 1.2随机整数 {{$randomint}} //生成0-1000之间的随机数 1.3GUID字符串 {{$guid}} //生成随机GUID字符串 2.自定义动态参数 格式…

【C++】探索一维数组:从基础到深入剖析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;1. 什么是一维数组&#xff1f;一维数组的特点&#xff1a;示例 &#x1f4af;2. 一维数组的创建创建语法示例代码示例 1&#xff1a;创建整型数组示例 2&#xff1a;使用常…

为什么要用ZGC

一、为什么要用 ZGC 问题 我们有个“智慧园区”的项目,我们的下游系统“交叉带”[硬件系统]要求我们服务 60ms内返回结果&#xff0c;并且可用性要达到 99.99%。当时使用的是 G1垃圾回收器&#xff0c;单次 Young GC 40ms&#xff0c;一分钟10次&#xff0c;接口平均响应时间…

ffmpeg 编译+ libx264

编译 libx264 将 libx264 生成结果拷贝到 msys64 的 usr\local 目录下。这样在 msys2_shell 中就可以使用 /usr/local 来找到这个路径了。 编译不设置 prefix&#xff0c;默认将文件拷贝到 /usr/local 编译 ffmpeg libx264 配置 pkg-config&#xff0c;不然编译找不到 libx26…

联通 路由器 创维SK-WR9551X 联通华盛VS010 组mesh 和 锐捷X32 PRO 无缝漫游

前言 联通路由器&#xff1a;联通创维SK-WR9551X&#xff0c;联通华盛VS010组mesh&#xff0c;并与锐捷X32 PRO混合组网&#xff0c;开启无限漫游。 1、mesh ≠ 无缝漫游 mesh是实现路由器快速组网的一种方式&#xff0c;通过mesh组网后可以实现无缝漫游。 mesh组网的设备要…

015-spring-动态原理、AOP的xml和注解方式

强制使用cglib动态代理 spring-AOP的使用

Nginx代理本地exe服务http为https

Nginx代理本地exe服务http为https 下载NginxNginx命令exe服务http代理为https 下载Nginx 点击下载Nginx 下载好之后是一个压缩包&#xff0c;解压放到没有中文的路径下就可以了 Nginx命令 调出cmd窗口cd到安装路径 输入&#xff1a;nginx -v 查看版本 nginx -h&#xff…

Oracle ASM命令行工具asmcmd命令及其使用方法

asmcmd 是 Oracle ASM&#xff08;Automatic Storage Management&#xff09;的一个命令行工具&#xff0c;用于直接管理和操作 ASM 实例和磁盘组。以下是一些常用的 asmcmd 命令及其使用方法的简要说明&#xff1a; 一、基本命令 1.1、启动 asmcmd [gridracdb2:/home/grid]…

计算机网络ENSP课设--三层架构企业网络

本课程设计搭建一个小型互联网&#xff0c;并模拟Internet的典型Web服务过程。通过此次课程设计&#xff0c;可以进一步理解Internet的工作原理和协议过程&#xff0c;并提高综合知识的运用能力和分析能力。具体目标包括&#xff1a; &#xff08;1&#xff09;掌握网络拓扑的…

如何解决Eigen和CUDA版本不匹配引起的错误math_functions.hpp: No such file or directory

Apollo9针对RTX40的docker环境里的Eigen库版本是3.3.4&#xff0c;CUDA是11.8: 编译我们自己封装模型的某些component代码时没问题&#xff0c;编译一个封装occ模型的component代码时始终报错: In file included from /usr/include/eigen3/Eigen/Geometry:11:0, …

Cobalt Strike流量改造

1&#xff1a;证书设置 这里我们直接伪造成bilibili的 通过网页查看证书详情&#xff1a; 2&#xff1a;上线流量设定 这里还是比较简单的 请求路径 请求地址 这里可以依据实际情况改 比如这里直接cv 3&#xff1a;心跳流量 这里我设置的是bilibil对于内容的搜索 这里我们…

Oracle 回归分析函数使用

Oracle 回归分析函数使用 文章目录 Oracle 回归分析函数使用什么是 回归分析函数回归分析函数示例1. 分析 SAL 和 COMM 之间的回归关系2. 按部门分析 SAL 和 COMM 的关系3. 根据 SAL 预测 COMM4. 分析员工薪资与工作年限的关5. 按部门分析工作年限与薪资的关系6. 计算 REGR_AVG…

【最新】17个一站式数据集成平台案例PPT下载(Apache SeaTunnel )

17个Apache SeaTunnel案例下载见附件&#xff01; 开发篇 1.Apache SeaTunnel——OLAP 引擎的数据动脉 1.1项目定位——EtLT 时代的新一代数据集成平台 1.2Apache SeaTunnel 核心功能 1.3Apache SeaTunnel 在 OLAP 场景下的应用 1.4WhaleTunnel 产品特性 2.教你从头到尾开发一…

集装箱的纸箱和塑料箱识别数据集,使用YOLO,COCO JSON,PASICAL VOC XML格式标注,识别准确率高达97.5%

集装箱的纸箱和塑料箱识别数据集&#xff0c;使用YOLO&#xff0c;COCO JSON&#xff0c;PASICAL VOC XML格式标注&#xff0c;识别准确率高达97.5% 数据集分割 训练组88&#xff05; 4605图片 有效集8% 438图片 测试集4% 219图片 预处理 自动定向&#x…

STM32 高级 物联网通讯之LoRa通讯

目录 LoRa通讯基础知识 常见的3种通讯协议 远距离高速率的传输协议 近距离高速率传输技术 近距离低功耗传输技术 低功耗广域网 采用授权频段技术 非授权频段 LoRa简介 LoRa的特点 远距离 低功耗 安全 标准化 地理定位 移动性 高性能 低成本 LoRa应用 LoRa组…