当前位置： 首页 > news >正文

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

news 2026/4/3 19:51:25

  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>

局部设定

相关文章：

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

定义 ::selection 伪元素&#xff1a; 在你的 CSS 文件中&#xff0c;添加 ::selection 伪元素&#xff0c;并设置 background-color 属性来改变选中文本的背景颜色。 示例代码&#xff1a; ::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black…...

编程日记 2025/1/3 6:04:09

Spring Boot AOP日志打印实现

在 Spring Boot 3.1.12 中使用 AOP 实现日志打印&#xff0c;记录前端传入的参数和后端返回的数据&#xff0c;可以按照以下步骤进行&#xff1a; 添加依赖 首先&#xff0c;确保你的 pom.xml 文件中包含了 Spring AOP 的依赖&#xff1a; <dependency><groupId>…...

编程日记 2025/1/3 6:02:06

Windows远程--如何使用IP访问服务器

1.第一步&#xff1a;在本地按下winR打开运行窗口&#xff0c;输入mstsc 打开window自带的远程桌面组件&#xff0c;在打开的窗口内输入公网ip。 2.第二步&#xff1a;输入远程电脑的登录用户名和密码&#xff0c;即可成功建立连接。...

编程日记 2025/1/3 6:01:03

vscode中设置默认格式化工具pretter

1. 安装 Prettier 插件 打开 VSCode 的扩展市场&#xff08;快捷键 CtrlShiftX 或点击左侧的扩展图标&#xff09;。 搜索并安装 Prettier - Code formatter 插件。 2. 设置 VSCode 使用 Prettier 格式化代码 打开 VSCode 的设置&#xff08;快捷键 Ctrl, 或点击右下角齿轮图标…...

编程日记 2025/1/3 5:59:02

Hadoop、Flink、Spark和Kafka

Hadoop、Flink、Spark和Kafka是大数据处理领域中的四个重要工具&#xff0c;它们在架构、数据处理方式以及性能等方面都存在区别。以下是具体分析&#xff1a; 架构 Hadoop&#xff1a;Hadoop的核心是HDFS&#xff08;Hadoop Distributed File System&#xff09;和MapReduce编…...

编程日记 2025/1/3 5:58:00

APP自动化测试元素定位及隐式等待

元素定位是UI自动化测试中最关键的一步&#xff0c;假如在自动化测试中没有定位到页面中素&#xff0c;也就无法完成对页面的测试操作。那么&#xff0c;我们在自动化测试中如何定位到是要部面元素呢&#xff1f; 下面聊一聊用 Appium 定位元素的方式。 定位页面元素有很多种…...

编程日记 2025/1/3 5:56:59

Element plus 的 upload 组件实现自定义上传

Element Plus 是一个基于 Vue 3 的 UI 组件库&#xff0c;提供了许多常用的 UI 组件。其中&#xff0c;Upload 组件用于文件上传功能。如果你想实现自定义上传逻辑&#xff0c;可以通过 before-upload 和 http-request 属性来实现。 以下是一个简单的示例&#xff0c;展示如何…...

编程日记 2025/1/3 5:54:57

力扣-数据结构-10【算法学习day.81】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…...

编程日记 2025/1/3 5:53:56

WPF的一些控件的触发事件记录

<c1:C1ComboBox Width"230" ItemsSource"{Binding ReplaceWayList}" Style"{StaticResource ListSearch-C1ComboBox}" SelectedValueChanged"C1ComboBox_SelectedValueChanged"&#xff0c; 下拉框事件&#xff0c;值改变事件&a…...

编程日记 2025/1/3 5:52:55

C# 设计模式（创建型模式）：建造者模式

C# 设计模式&#xff08;创建型模式&#xff09;&#xff1a;建造者模式 引言 在软件开发中&#xff0c;创建型设计模式主要关注对象的创建方式&#xff0c;其中建造者模式&#xff08;Builder Pattern&#xff09;是非常重要的一种。建造者模式通过一步一步构建一个复杂对象…...

编程日记 2025/1/3 5:49:52

关于模板函数的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…...

编程日记 2025/1/3 5:48:51

重现ORA-01555 细说Oracle Undo 数据管理

1. 概述 1.1. Undo 数据应用 undo数据是&#xff1a; 原始的、修改之前的数据副本 是针对更改数据的每个事务处理所捕获的 至少保留到事务处理结束 用于支持&#xff1a; 回退操作 读取一致性查询 闪回查询、闪回事务处理和闪回表 从失败的事务处理中进行恢复 1.2. 事…...

编程日记 2025/1/3 5:47:50

通过blob请求后端导出文件

后端controller PostMapping("/exportPlanProject2")public void exportActive(RequestBody IfPlanListDTO plan, HttpServletResponse httpServletResponse) throws IOException {}后端service public void exportExcel2(HttpServletResponse response) throws IOEx…...

编程日记 2025/1/3 5:46:49

养老院小程序怎么搭建?让老年人老有所养，老有所依!

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

编程日记 2025/1/3 5:45:48

【2024美国数学建模AB题原文翻译】

2024 MCM 问题A&#xff1a;资源可用性与性别比例 虽然一些动物物种超出了通常的雄性或雌性性别范畴&#xff0c;但大多数物种要么是雄性要么是雌性。尽管许多物种在出生时展现出1:1的性别比例&#xff0c;其他物种则偏离了这个性别比例&#xff0c;这被称为适应性性别比例变化…...

编程日记 2025/1/3 5:43:46

判断旗帜是否符合ISO新标准

背景介绍 在全球化的背景下&#xff0c;不同国家的旗帜设计需要满足某些国际标准以便于统一化和规范化。ISO&#xff08;国际标准化组织&#xff09;提出了一项新规定&#xff0c;要求国家旗帜在设计时遵循一些规则&#xff0c;特别是棋盘状设计中的颜色分布规则。比如&#x…...

编程日记 2025/1/3 5:41:44

海量数据存储实现方案设计1-mycat版

目的 这里使用mycat为例子说明方案设计思路&#xff08;仅个人学习、思考笔记&#xff09;。主要尝试解决海量数据存储、动态不停机扩容问题&#xff0c;不再受限于单库、单表、单机等。 mycat简述 mycat 主要以中间件代理的方式&#xff0c;不侵入工程代码来实现分库分表&a…...

编程日记 2025/1/3 5:39:42

Elasticsearch检索之三：官方推荐方案search_after检索实现（golang）

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

编程日记 2025/1/3 5:38:41

hot100_238. 除自身以外数组的乘积

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

编程日记 2025/1/3 5:37:40

软件测试基础详解

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

编程日记 2025/1/3 5:31:35

实战指南：利用Hydra与SNETCracker加固3389远程桌面安全

1. 3389端口与远程桌面安全基础 3389端口是Windows远程桌面协议&#xff08;RDP&#xff09;的默认通信端口&#xff0c;就像你家大门的钥匙孔。想象一下&#xff0c;如果钥匙孔被所有人知道位置&#xff0c;又没装猫眼和防盗链&#xff0c;会是什么后果&#xff1f;这就是为什…...

编程新知 2026/4/3 18:32:17

别再手动查日志了！用Skywalking 9.x快速定位Spring Boot微服务性能瓶颈

别再手动查日志了&#xff01;用Skywalking 9.x快速定位Spring Boot微服务性能瓶颈 微服务架构下最令人头疼的场景莫过于&#xff1a;凌晨三点收到告警&#xff0c;某个核心接口响应时间从200ms飙升到5秒&#xff0c;而你面对几十个相互调用的服务和海量日志&#xff0c;完全不…...

编程新知 2026/4/3 18:19:45

用C++实现LBM格子玻尔兹曼方法MRT模拟加热气泡脱离

lbm格子玻尔兹曼方法mrt模拟加热气泡脱离c代码最近在研究流体力学相关的模拟&#xff0c;其中LBM&#xff08;格子玻尔兹曼方法&#xff09;的MRT&#xff08;多松弛时间&#xff09;模型在模拟加热气泡脱离这类复杂现象时展现出独特的优势。今天就来和大家分享一下如何用C 实现…...

编程新知 2026/4/3 17:53:26

第三方系统集成若依权限校验

假设系统A是由若依管理系统进行的二次开发&#xff0c;保留了若依的用户、权限、角色管理功能&#xff0c;第三方系统B想要调我们的系统A的接口&#xff0c;就得先集成我们的SDK&#xff0c;这样就可以通过我们系统A的权限、角色校验&#xff0c;从而完成接口调用 一 开发若依S…...

编程新知 2026/4/3 16:28:06

SEO工具如何提供网站的整体优化建议

SEO工具如何提供网站的整体优化建议 在当今竞争激烈的互联网市场中&#xff0c;网站的整体优化是每一个企业和个人网站的重要任务。SEO工具在这一过程中扮演着不可或缺的角色。SEO工具如何提供网站的整体优化建议呢&#xff1f;本文将从问题分析、原因说明、解决方法、注意事项…...

编程新知 2026/4/3 15:59:46

如何用LangChain开发一个Agent，20分钟包教包会！

26年一定是一个 Agent 大年&#xff0c;我这边持续出系列文章&#xff0c;帮助大家更好的落地 Agent&#xff0c;今天的重点是程序员最常用的 Agent 框架 LangChain。 只不过这东西可能由于 AI Coding 的成熟&#xff0c;由给人看变成给 AI 看的。 LangChain 既是一个开源的A…...

编程新知 2026/4/3 15:15:14

Anthropic Claude Code源代码意外泄露：npm打包失误暴露512,000行闭源代码

2026年3月31日&#xff0c;Anthropic公司一名员工在向npm公开注册账户发布AI编程工具Claude Code&#xff08;版本2.1.88&#xff09;时&#xff0c;意外捆绑了源映射&#xff08;source map&#xff09;文件&#xff0c;导致该闭源代理式编码工具的完整专有源代码完全暴露。 …...

编程新知 2026/4/3 14:50:43

Hunyuan翻译模型部署慢？一键镜像提速90%实战验证

Hunyuan翻译模型部署慢&#xff1f;一键镜像提速90%实战验证 还在为Hunyuan翻译模型部署耗时过长而烦恼吗&#xff1f;本文将为你展示如何通过CSDN星图镜像实现90%的部署速度提升&#xff0c;让你快速体验高性能翻译服务。 1. 从零开始&#xff1a;传统部署的痛点与挑战 部署A…...

编程新知 2026/4/3 13:47:19

IDM激活工具使用指南：长期使用IDM的技术方案详解

IDM激活工具使用指南&#xff1a;长期使用IDM的技术方案详解 【免费下载链接】IDM-Activation-Script IDM Activation & Trail Reset Script 项目地址: https://gitcode.com/gh_mirrors/id/IDM-Activation-Script Internet Download Manager&#xff08;IDM&#xf…...

编程新知 2026/4/3 13:25:07

LFM2.5-1.2B-Thinking-GGUF压力测试与性能调优：寻找最佳并发参数

LFM2.5-1.2B-Thinking-GGUF压力测试与性能调优&#xff1a;寻找最佳并发参数 1. 为什么需要压力测试 当你把LFM2.5-1.2B-Thinking-GGUF模型部署上线后&#xff0c;最担心的问题可能就是&#xff1a;这个服务能承受多少用户同时访问&#xff1f;会不会在高并发时崩溃&#xff…...

编程新知 2026/4/3 11:15:53