持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

前情提要

为了丰富自己是知识体系，我最近频繁翻阅MDN的文档，果然MDN文档常看常新。

最近翻到CSS部分，刚把60多个伪类翻了一遍，准备翻翻别的。

它这个分类挺有趣的，以前看所有属性一大片，也没注意过，原来大家也可以分门别类。

今天翻阅基础用户界面相关的属性，大部分属性的花样连个手绢都绣不成，倒是最后这个user-select蛮有看头的。

禁止文本复制功能

先来点击文字试试

code.juejin.cn/pen/7152507…

禁止文本复制的实现很简单，为元素添加user-select属性，且属性值为none。

.select-none {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

user-select

user-select的作用是控制文本能否被选中。

属性

属性名	介绍
auto	auto 的具体取值是分条件的：- 如果元素是 ::before 或 ::after 伪元素，默认的属性值是 none

如果元素是可编辑元素，默认的属性值是 contain
如果此元素的父元素的 user-select 采用的属性值为 all，默认的属性值是all
如果此元素的父元素的 user-select 采用的属性值为 none，默认的属性值是none
其他条件，默认的属性值是text。 | | none | 文本及子元素不可被选中。 | | text | 文本可被选中。 | | all | 单击即可选中文本。当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。 | | contain | 允许在元素内选择。但是，选区将被限制在该元素的边界之内。 |

吃瓜不分大小

子元素样式重置之后可以被选中

实际开发中，总有那么几个需求要与众不同，要特立独行。

一段文本中，个别文本可以被复制也是有可能出现的。比如微信公众号，类似这种的特别文本。

这个时候将需要被复制的子元素的user-select属性值设置成text。

.select-none {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.select-text {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
......
<div class='select-none'>
  我是无法被复制的
  <div class='select-text'>子元素设置user-select: text之后可以被选中</div>
</div>

::before/:after伪元素确实无法被选中

即便将::before的user-select设置为text，也无法被选中。

::before和::after的内容无法被选中的，已是不争的事实。

.select::before {
  content: '这里是::before';
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  display: block;
}

未完待续

user-select吃瓜告一段落。最大的收获就是，CSS能玩出花的技能又增加了。

我喜欢创作，每一幅作品都是我将想象用一只叫做“代码”的画笔，绘制而成。

当我寻找新的技术的时候，不是创意枯竭，而是我需要新的色彩。

而这个循序渐进的学习过程，虽然缓慢，但是积少成多、聚沙成塔。

禁止文本复制一哥user-select，摸一摸这条藤上还有没有其他瓜