css 修改页面选中时背景颜色

本文介绍如何通过简单的CSS代码来改变网页中被选中文本的背景颜色及文字颜色,实现个性化展示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


看到别人博客的选中文字的时候是其它颜色

我们的网页一般选中文字时候是蓝色背景,白色文字。

而有的前端会在自己的博客上进行特殊化处理一下,就是修改背景颜色。

现在分享这一段代码

::selection{background:#a7bd06;color:#FFF;}
::-moz-selection{background:#a7bd06;color:#FFF;}

 只要在你的CSS文件中插入这一段代码你的背景也就不一样了。

颜色值是根据自己的需要进行更改的。

### 更改 Element UI 表格组件中选中行的背景颜色 为了实现 `el-table` 组件中选中行的背景颜色自定义,可以通过 CSS 来覆盖默认样式。具体来说,在项目中的全局或局部样式文件里添加特定的选择器来指定 `.current-row` 类的样式。 ```css /* 用于设置当前页面element全局table选中某行背景色 */ .el-table__body tr.current-row>td { background-color: #92cbf1 !important; color: #fff; } ``` 上述代码片段通过重写 `.el-table__body tr.current-row>td` 的样式实现了对选中背景颜色以及文字颜色的修改[^2]。需要注意的是,这里使用了 `!important` 关键字以确保此规则优先于框架自带或其他可能存在的冲突样式生效。 另外一种方法是在 Vue 单文件组件 (SFC) 或者 scoped 样式的环境中应用这些样式: ```html <style scoped> /* 如果在单文件组件内,则可以这样写 */ ::v-deep .el-table__body tr.current-row>td { background-color: #92cbf1 !important; color: #fff; } </style> ``` 这种方法利用了 `::v-deep` 深度选择符让样式穿透作用域限制影响到子组件内的元素上。 #### 完整示例 下面是一个完整的 HTML 和 CSS 结合的例子展示如何配置一个带有自定义选中行样式的表格: ```html <template> <div class="example"> <!-- Table component --> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ // 数据源... ] }; }, methods: { handleSelectionChange(selection) { this.$refs.multipleTable.setCurrentRow(); if (selection.length === 1) { this.$refs.multipleTable.toggleRowSelection(selection[0], true); } } } }; </script> <style scoped> .example ::v-deep .el-table__body tr.current-row>td { background-color: #92cbf1 !important; color: #fff; } </style> ``` 这段代码不仅设置了选中行的颜色变化逻辑,还包含了基本的数据绑定和服务端交互所需的钩子函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值