使用 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) 时间复杂度…...

软件测试基础详解
🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 “尽早的介入测试,遇到问题的解决成本就越低” 随着软件测试技术的发展,测试工作由原来单一的寻找缺陷逐渐发展成为预防缺陷,…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storms…...
vue3 daterange正则踩坑
<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...