请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
当网页中的文本被用户选中，被选中的文本通常会呈现出蓝底白字的样子，并且，不论原来的文本做了什么样的修饰，是设置了前景色，还是做了突出显示，默认情况下，文本颜色都是白色。选中区域默认的蓝底白字没有什么不好，不过别样的文本选中样式应该极具表现力，一些特殊场景可能会有这方面的需求。
自定义文本被选中的样式，我们可以使用CSS的伪元素 ::selection 来实现。如下CSS设置，将使得 .mum 容器里的一切文本在被选中区域中拥有与默认样式不同的样子，请试着选择代码框中的文本，本文自身也设置了 ::selection 样式，也可以尝试一下，然后再去别处选择文本以便比较一下这里和它们的区别：
/*
.mum选择器下被选中区域渲染样式，作用于其下
直接文本子节点和所有的子元素内的文本
特别需要注意：.mum 和 ::selection 之间有一个空格，这是作用于全部
写成没有空格间隔的，.mum::selection，仅作用于.mum的直接子文本节点
*/
.mum ::selection { background: rgba(0,100,100,.35); }
::selection除了上述 background-color 或 background 设置，还可以设置少量的属性，以下是可以在 ::selection 伪元素选择器下使用的属性列表：
color: black; /* 前景色（文本颜色） */
background: silver; /* 同 background-color */
cursor: pointer; /* 鼠标指针 */
caret-color: red; /* 插入光标颜色 */
outline: 2px dotted pink; /* 外边框样式 */
text-decoration: underline; /* 文本装饰线条 */
text-emphasis-color: yellow; /* 文本强调色 */
text-shadow: 1px 1px solid black; /* 文本阴影 */
以上属性不是一旦设置就能生效，因为，原因之一是有一部分属性存在环境依赖，例如插入光标，通常仅出现在可在线编辑的区域，还可能有其他的原因，比如浏览器还没有支持，等等。通常，最常用的就是背景色和前景色设置。
【小技巧】正如本帖示例展示的代码那样，可以使用有透明度的颜色设置 ::selection 背景，且无需设置文本前景色，如此，文本原本的着色设计在用户选中时依然产生作用，阅读选中的文本时环境更为友好。
| 
发表于 2024-2-27 12:46
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-2-27 14:38
发表于 2024-2-27 18:08
小白先支持一下。。
楼主
