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

  1. 定义 ::selection 伪元素

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

  2. 示例代码

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

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

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

全局设置::selection

html 复制代码
<!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

html 复制代码
<!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>
相关推荐
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫6 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim6 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron