我们在页面输入的文本按理来说应该都是可以选中的，但是如何才能让显示出来的文本或是图片不被选中呢，这时候就需要用到 user-select 属性。
user-select
user-select （CSS属性），控制着用户能否选中文本。除了在文本框中，在 Chrome浏览器中对已经加载的文本没有影响。
一、语法：
user-select：none / text / all / element / auto
user-select 属性的默认值为 text，没有继承性，适用于替换元素外的所有元素。
二、属性值：
none：文本不能被选中。注意这个 Selection 对象包含这些元素。从 Firefox21 开始，none表现的想 -moz-none，因此可以使用 -moz-user-select ：text 在子元素上重新启用选择。
text：默认值，可以选中文本
all：当所有内容可以作为一个整体被选择。（如果双击或是在上下文上点击子元素，那么包含该元素的子元素也将被选中。）
element：可以选择文本，但是选择范围受元素边界的约束
auto：auto的计算值确定如下：
- 在::before 和 ::after 伪元素上，计算的属性是 none
- 如果元素是可编辑元素，则计算值是 contain
- 否则，如果此元素的父元素的 user-select 的计算值为 all，则计算值为 all
- 否则，如果此元素的父级上的 user-select 的计算值为 none，则计算值为 none
- 否则，计算值则为 text
注：Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。
注意：在不同浏览器之间实现的一个区别是继承。 在Firefox中，-moz-user-select不会被绝对定位的元素继承，但在Safari和Chrome中，-webkit-user-select由这些元素继承。
三、设置或检索是否允许用户选中文本
IE6-9不支持该属性，但是支持使用标签属性 onselecstart = 'return false;' 来达到 user-select: none 的效果。Safari 和 Chrome 也支持该标签属性。
直到Opera12.5 仍然不支持该属性，但是和 IE6-9一样，也支持私有的标签属性 unselectable = 'on' 来达到 user-selector：none 的效果；unselectable 的另外一个值是 off；
除了 Chrome 和 Safari外，和在其他浏览器中，如果将文本设置为 -ms-user-select：none; 则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select：none; 的区域文本。
四、浏览器兼容性：
红色：no supported （不支持）
绿色：supported （支持）
绿色有黄色标识：supported width prefix （支持但需要前缀）
五、实例：
HTML
<p>你应该可以选中这段文本。</p>
<p class="unselectable">你不能选中这段文本!</p>
CSS
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
https://www.html.cn/book/css/properties/user-interface/user-select.htm#a3