user-select属性是css3新增的属性，⽤于设置⽤户是否能够选中⽂本。可⽤于除替换元素外的所有元素，

(1) 语法

user-select:none | text | all | element
默认值：text
适⽤范围：除替换元素外的所有元素

(2) 取值说明

  none:⽂本不能被选择

  text:可以选择⽂本

  all:当所有内容作为⼀个整体时可以被选择。如果双击或者在上下⽂上点击⼦元素，那么
被选择的部分将是以该⼦元素向上回溯的最⾼祖先元素。

  Element:可以选择⽂本，但选择范围受元素边界的约束

(3) 设置或检索是否允许用户选中文本

   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; 的区域文本。

（4）案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .unselectable {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .allAelectable {
            -moz-user-select: all;
            -webkit-user-select: all;
            -ms-user-select: all;
            user-select: all;
        }
    </style>
</head>
<body>
    <p>你应该可以选中这段文本。</p>
    <p class="unselectable">你不能选中这段文本!</p>
    <p class="allAelectable">双击能选中这段文本!</p>
</body>
</html>
赏
评 论