一个常见的小众前端技术

99 阅读2分钟

作为一名cv工程师,选中复制粘贴这一系列操作可谓是驾轻就熟,行云流水。但是这几天在看文章的时候发现选中这一操作其实是有一些花活可以玩的。总结的不太全面,如果有看到这篇文章的,可以在评论区帮忙补充,我会尽快同步到文章里面的。

选中范围

常用csdn的可能遇到过想复制里面的代码,但是发现代码无法选中的情况,这就是在那块元素上使用了user-select。

mdn上面的描述挺复杂的,但是实际的使用中大体上也就是两个属性,none和all,如果没有声明该属性,则默认值就是text。

当user-select的值为none的时候,元素无法被选中,当user-select的值为all的时候,点击一次就可以选中该元素内所有元素。这里感觉不用细说,日常生活中的选中操作并不罕见。

image.png

大体上就是这么个用法。

选中样式

写过掘金文章的可能有过感受,掘金的富文本编辑器选中文字的背景颜色和文字颜色与常见的默认选中样式是不一致的,这就是::selection这一伪元素的作用了。

这个伪元素的用法和其他伪元素是一样的,基本也不用多追叙,只是这个伪元素所能生效的css样式并不太多。mdn上面罗列了很多,但是我试了一下发现只有color,background-color和text-shadow有效。我也好奇是我用法不对还是什么原因,反正我这里只有这三个属性设置之后会生效。

这个其实还是能玩出很多花活的,具体看这篇文章,里面的创意还是不错的。

先简简单单的水一篇,后面陆续还会添加一下内容到这篇文章里面,基本上也是和选中复制粘贴相关的内容。