语法
user-select: auto | none | text | all | contain | initial | inherit;
具有“auto”值的用户选择属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
-webkit-user-select: auto;/* Safari 3.1+ */
-moz-user-select: auto;/* Firefox 2+ */
user-select: auto;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select 属性示例</h2>
<div>生活终归还得继续。.</div>
</body>
</html>
在给定的示例中，无法选择文本。
具有“none”值的用户选择属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
-webkit-user-select: none;/* Safari 3.1+ */
-moz-user-select: none;/* Firefox 2+ */
user-select: none;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select 属性示例</h2>
<div>生活终归还得继续。.</div>
</body>
</html>
通过单击而不是双击来选择文本。
具有“all”值的用户选择属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
-webkit-user-select: all;/* Safari 3.1+ */
-moz-user-select: all;/* Firefox 2+ */
user-select: all;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select 属性示例</h2>
<div>生活终归还得继续。.</div>
</body>
</html>
在以下示例中，我们可以选择所需文本的任何部分。
具有“文本”值的用户选择属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
-webkit-user-select: text;/* Safari 3.1+ */
-moz-user-select: text;/* Firefox 2+ */
user-select: text;/* Standard syntax */
}
</style>
</head>
<body>
<h2>User-select 属性示例</h2>
<div>生活终归还得继续。.</div>
</body>
</html>
user-select 属性指定用户是否可以选择文本。
默认值为“auto”，其确定方式如下：
- 在 ::before 和 ::after 伪元素上，计算值为“none”
- 如果元素是可编辑元素，则计算值为“包含”，
- 如果 user-select 在该元素的父元素上的计算值为“all”，则计算值为“all”。
- 如果 user-select 在该元素的父元素上的计算值为“none”，则计算值为“none”，
- 否则，计算值是“文本”。
对于最大的浏览器兼容性扩展，例如 -webkit- 用于 Safari、Google Chrome 和 Opera（较新版本），用于 Firefox 的 -moz- 与此属性一起使用。
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素，尽管某些值对非内联元素没有影响。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.Userselect =“text”; |
CSS user-select 属性值说明
| 值 | 描述 |
|---|---|
| auto | 如果浏览器允许它，可以选择文本。这是此属性的默认值。 |
| none | 文本未选择。 |
| text | 文本由用户选择。 |
| all | 文本由单击单击选中。 |
| contain | 当元素是可编辑的时。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
日期：2020-06-02 22:14:51 来源：oir作者：oir