使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色
-
定义
::selection
伪元素:
在你的 CSS 文件中,添加::selection
伪元素,并设置background-color
属性来改变选中文本的背景颜色。 -
示例代码:
::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black; /* 可选:更改选中文本的颜色 */ }
-
注意事项:
::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>
相关文章:

使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色
定义 ::selection 伪元素: 在你的 CSS 文件中,添加 ::selection 伪元素,并设置 background-color 属性来改变选中文本的背景颜色。 示例代码: ::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black…...
Spring Boot AOP日志打印实现
在 Spring Boot 3.1.12 中使用 AOP 实现日志打印,记录前端传入的参数和后端返回的数据,可以按照以下步骤进行: 添加依赖 首先,确保你的 pom.xml 文件中包含了 Spring AOP 的依赖: <dependency><groupId>…...

Windows远程--如何使用IP访问服务器
1.第一步:在本地按下winR打开运行窗口,输入mstsc 打开window自带的远程桌面组件,在打开的窗口内输入公网ip。 2.第二步:输入远程电脑的登录用户名和密码,即可成功建立连接。...
vscode中设置默认格式化工具pretter
1. 安装 Prettier 插件 打开 VSCode 的扩展市场(快捷键 CtrlShiftX 或点击左侧的扩展图标)。 搜索并安装 Prettier - Code formatter 插件。 2. 设置 VSCode 使用 Prettier 格式化代码 打开 VSCode 的设置(快捷键 Ctrl, 或点击右下角齿轮图标…...
Hadoop、Flink、Spark和Kafka
Hadoop、Flink、Spark和Kafka是大数据处理领域中的四个重要工具,它们在架构、数据处理方式以及性能等方面都存在区别。以下是具体分析: 架构 Hadoop:Hadoop的核心是HDFS(Hadoop Distributed File System)和MapReduce编…...
APP自动化测试元素定位及隐式等待
元素定位是UI自动化测试中最关键的一步,假如在自动化测试中没有定位到页面中素,也就无法完成对页面的测试操作。那么,我们在自动化测试中如何定位到是要部面元素呢? 下面聊一聊用 Appium 定位元素的方式。 定位页面元素有很多种…...
Element plus 的 upload 组件实现自定义上传
Element Plus 是一个基于 Vue 3 的 UI 组件库,提供了许多常用的 UI 组件。其中,Upload 组件用于文件上传功能。如果你想实现自定义上传逻辑,可以通过 before-upload 和 http-request 属性来实现。 以下是一个简单的示例,展示如何…...

力扣-数据结构-10【算法学习day.81】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向(例如想要掌握基础用法,该刷哪些题?建议灵神的题单和代码随想录)和记录自己的学习过程,我的解析也不会做的非常详细,只会提供思路和一些关…...
WPF的一些控件的触发事件记录
<c1:C1ComboBox Width"230" ItemsSource"{Binding ReplaceWayList}" Style"{StaticResource ListSearch-C1ComboBox}" SelectedValueChanged"C1ComboBox_SelectedValueChanged", 下拉框事件,值改变事件&a…...
C# 设计模式(创建型模式):建造者模式
C# 设计模式(创建型模式):建造者模式 引言 在软件开发中,创建型设计模式主要关注对象的创建方式,其中建造者模式(Builder Pattern)是非常重要的一种。建造者模式通过一步一步构建一个复杂对象…...

关于模板函数的void返回值的判断:std::is_void与模板特化
int返回值的函数参数测试 #include <iostream> #include <functional>int return_int_func(){std::cout << __func__ << std::endl << std::flush;return 10086; }template<class U> auto CallDeviceMethodShort(std::function<U()&g…...

重现ORA-01555 细说Oracle Undo 数据管理
1. 概述 1.1. Undo 数据应用 undo数据是: 原始的、修改之前的数据副本 是针对更改数据的每个事务处理所捕获的 至少保留到事务处理结束 用于支持: 回退操作 读取一致性查询 闪回查询、闪回事务处理和闪回表 从失败的事务处理中进行恢复 1.2. 事…...
通过blob请求后端导出文件
后端controller PostMapping("/exportPlanProject2")public void exportActive(RequestBody IfPlanListDTO plan, HttpServletResponse httpServletResponse) throws IOException {}后端service public void exportExcel2(HttpServletResponse response) throws IOEx…...

养老院小程序怎么搭建?让老年人老有所养,老有所依!
随着社会老龄化的加剧,养老服务成为一个越来越重要的话题。在这个互联网的时代,养老院也开始拥抱技术,借助小程序的便捷性来改善老年人的居住和生活体验。那么,如何搭建一个适合老年人的养老院小程序呢?本文将从实际操作的角度出…...

【2024美国数学建模AB题原文翻译】
2024 MCM 问题A:资源可用性与性别比例 虽然一些动物物种超出了通常的雄性或雌性性别范畴,但大多数物种要么是雄性要么是雌性。尽管许多物种在出生时展现出1:1的性别比例,其他物种则偏离了这个性别比例,这被称为适应性性别比例变化…...
判断旗帜是否符合ISO新标准
背景介绍 在全球化的背景下,不同国家的旗帜设计需要满足某些国际标准以便于统一化和规范化。ISO(国际标准化组织)提出了一项新规定,要求国家旗帜在设计时遵循一些规则,特别是棋盘状设计中的颜色分布规则。比如&#x…...
海量数据存储实现方案设计1-mycat版
目的 这里使用mycat为例子说明方案设计思路(仅个人学习、思考笔记)。主要尝试解决海量数据存储、动态不停机扩容问题,不再受限于单库、单表、单机等。 mycat简述 mycat 主要以中间件代理的方式,不侵入工程代码来实现分库分表&a…...

Elasticsearch检索之三:官方推荐方案search_after检索实现(golang)
Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一:使用fromsize实现分页 快速掌握Elasticsearch检索之二:滚动查询(scrool)获取全量数据(golang) 1、search_after检索 在前面的文章介绍了fromsize的普通分页…...

hot100_238. 除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...

软件测试基础详解
🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 “尽早的介入测试,遇到问题的解决成本就越低” 随着软件测试技术的发展,测试工作由原来单一的寻找缺陷逐渐发展成为预防缺陷,…...

练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...

Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...

《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...

如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...