前情提要

最近重温了一下MDN文档，果然温故而知新。

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

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

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

禁止文本复制功能

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

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

user-select

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

属性

实际开发中的不同需求

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

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

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

这个时候将需要被复制的子元素的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能玩出花的技能又增加了。