CSS 设置选中文本样式
<style>.mydiv { font-size: 18px; overflow: hidden; position: relative; }
.mydiv > p { margin: 10px 0; }
.mydiv ::selection { background: rgba(50,120,50,.35); }
.mydiv mark { background: blue; color: white; padding: 0 4px; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thin solid silver; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<div class="mydiv">
<p>当网页中的文本被用户选中，被选中的文本通常会呈现出<mark>蓝底白字</mark>的样子，并且，不论原来的文本做了什么样的修饰，是设置了前景色，还是做了突出显示，默认情况下，文本颜色都是白色。选中区域默认的蓝底白字没有什么不好，不过别样的文本选中样式应该极具表现力，一些特殊场景可能会有这方面的需求。</p>
<p>自定义文本被选中的样式，我们可以使用CSS的伪元素 ::selection 来实现。如下CSS设置，将使得 .mum 容器里的一切文本在被选中区域中拥有与默认样式不同的样子，请试着选择代码框中的文本，本文自身也设置了 ::selection 样式，也可以尝试一下，然后再去别处选择文本以便比较一下这里和它们的区别：</p>
<div class='mum'>
<div class="tGreen"><cl-cd data-idx="1">/*</cl-cd>
<cl-cd data-idx="2">.mum选择器下被选中区域渲染样式，作用于其下</cl-cd>
<cl-cd data-idx="3">直接文本子节点和所有的子元素内的文本</cl-cd>
<cl-cd data-idx="4">特别需要注意：.mum 和 ::selection 之间有一个空格，这是作用于全部</cl-cd>
<cl-cd data-idx="5">写成没有空格间隔的，.mum::selection，仅作用于.mum的直接子文本节点</cl-cd>
<cl-cd data-idx="6">*/</cl-cd></div>
<cl-cd data-idx="7">.mum ::selection { <span class="tBlue">background</span>: rgba(0,100,100,.35); }</cl-cd>
</div>
<p>::selection除了上述 background-color 或 background 设置，还可以设置少量的属性，以下是可以在 ::selection 伪元素选择器下使用的属性列表：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">color:</span> black;<span class="tGreen">/* 前景色（文本颜色） */</span></cl-cd>
<cl-cd data-idx="2"><span class="tBlue">background:</span> silver;<span class="tGreen">/* 同 background-color */</span></cl-cd>
<cl-cd data-idx="3"><span class="tBlue">cursor:</span> pointer; <span class="tGreen">/* 鼠标指针 */</span></cl-cd>
<cl-cd data-idx="4"><span class="tBlue">caret-color:</span> red;<span class="tGreen">/* 插入光标颜色 */</span></cl-cd>
<cl-cd data-idx="5"><span class="tBlue">outline:</span> 2px dotted pink; <span class="tGreen">/* 外边框样式 */</span></cl-cd>
<cl-cd data-idx="6"><span class="tBlue">text-decoration:</span> underline;<span class="tGreen">/* 文本装饰线条 */</span></cl-cd>
<cl-cd data-idx="7"><span class="tBlue">text-emphasis-color:</span> yellow; <span class="tGreen">/* 文本强调色 */</span></cl-cd>
<cl-cd data-idx="8"><span class="tBlue">text-shadow:</span> 1px 1px solid black;<span class="tGreen">/* 文本阴影 */</span></cl-cd>
</div>
<p>以上属性不是一旦设置就能生效，因为，原因之一是有一部分属性存在环境依赖，例如插入光标，通常仅出现在可在线编辑的区域，还可能有其他的原因，比如浏览器还没有支持，等等。通常，最常用的就是背景色和前景色设置。</p>
<p>【小技巧】正如本帖示例展示的代码那样，可以使用有透明度的颜色设置 ::selection 背景，且无需设置文本前景色，如此，文本原本的着色设计在用户选中时依然产生作用，阅读选中的文本时环境更为友好。</p>
</div>
真的变了呢，这个厉害了{:4_199:} 吃瓜开胃{:4_173:} 支持一把。 还有这个效果啊，黑黑这些变色字对做帖有特效吗？几天没有上来出新花样了{:4_170:} {:4_190:}小白先支持一下。。 南无月 发表于 2024-2-27 18:08
小白先支持一下。。
谢支 樵歌 发表于 2024-2-27 13:22
吃瓜开胃
{:4_172:} 小辣椒 发表于 2024-2-27 17:34
还有这个效果啊，黑黑这些变色字对做帖有特效吗？几天没有上来出新花样了
没效。这是渲染代码便于阅读的。 庶民 发表于 2024-2-27 14:38
支持一把。
谢谢 红影 发表于 2024-2-27 12:53
真的变了呢，这个厉害了
没孙悟空厉害 进来学习的 冬天的雨 发表于 2024-2-27 19:13
进来学习的
{:4_190:} 马黑黑 发表于 2024-2-27 18:09
谢支
{:4_173:} 南无月 发表于 2024-2-27 19:46
咋滴啦 马黑黑 发表于 2024-2-27 18:10
没效。这是渲染代码便于阅读的。
哦，明白了 马黑黑 发表于 2024-2-27 18:11
没孙悟空厉害
那是神仙啊，在人类里最厉害的也很厉害啊{:4_189:} 红影 发表于 2024-2-27 22:31
那是神仙啊，在人类里最厉害的也很厉害啊
额 小辣椒 发表于 2024-2-27 20:10
哦，明白了
{:4_190:} 马黑黑 发表于 2024-2-27 22:42
额
再说了，比孙大圣厉害的本来就没几个，他那么任性呢{:4_173:}
页:
[1]