files/zh-cn/web/css/user-select/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: user-select
slug: Web/CSS/user-select
tags:
  - CSS
  - CSS Property
  - Reference
translation_of: Web/CSS/user-select
---
<div>{{CSSRef}}</div>

<p><a href="/zh-CN/docs/Web/CSS">CSS</a> 属性 <code><strong>user-select</strong></code><strong> </strong>控制用户能否选中文本。除了文本框内，它对被载入为 {{Glossary("Chrome", "chrome")}} 的内容没有影响。</p>

<pre class="brush:css">/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only
                             "none" or "text", or else it will
                             allow typing in the &lt;html&gt; container */

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
</pre>

<p>{{cssinfo}}</p>

<div class="blockIndicator note">
<p><strong>注意：</strong><code>user-select</code> 不是继承属性，即使默认的属性值 <code>auto</code> 的表现基本上以继承为主，似乎是继承属性。甚至，WebKit/基于 Chromium 的浏览器在实现此属性时<em>将其作为继承属性</em>，但这和有关规范是相悖的，且会带来一些问题。目前，Chromium 暂时选择<a href="https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de">修复将其作为继承属性所带来的问题</a>，使最终表现符合规范。</p>
</div>

<h2 id="语法">语法</h2>

<dl>
 <dt><code>none</code></dt>
 <dd>元素及其子元素的文本不可选中。 请注意这个{{domxref("Selection")}} 对象可以包含这些元素。 从Firefox 21开始， <code>none</code> 表现的像 <code>-moz-none</code>，因此可以使用 <code>-moz-user-select: text</code> 在子元素上重新启用选择。</dd>
 <dt><code>auto</code></dt>
 <dd>
 <p><code>auto</code> 的具体取值取决于一系列条件，具体如下：</p>

 <ul>
  <li>在 <code>::before</code> 和 <code>::after</code> 伪元素上，采用的属性值是 <code>none</code></li>
  <li>如果元素是可编辑元素，则采用的属性值是 <code>contain</code></li>
  <li>否则，如果此元素的父元素的 <code>user-select</code> 采用的属性值为 <code>all</code>，则该元素采用的属性值也为 <code>all</code></li>
  <li>否则，如果此元素的父元素的 <code>user-select</code> 采用的属性值为 <code>none</code>，则该元素采用的属性值也为 <code>none</code></li>
  <li>否则，采用的属性值为 <code>text</code></li>
 </ul>
 </dd>
 <dt><code>text</code></dt>
 <dd>用户可以选择文本。</dd>
 <dt><code>all</code></dt>
 <dd>在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。</dd>
 <dt><code>contain</code></dt>
 <dd>允许在元素内选择；但是，选区将被限制在该元素的边界之内。</dd>
 <dt><code>element</code>{{non-standard_inline}}（IE 专有别名）</dt>
 <dd>与 <code>contain</code> 相同，但仅在 Internet Explorer 中受支持。</dd>
</dl>

<div class="note">
<p><strong>注意：</strong> CSS UI 4 已<a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">将 <code>user-select</code> 的 <code>element</code> 属性值重命名为 <code>contain</code></a>。</p>
</div>

<h3 id="形式化语法">形式化语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;你应该可以选中这段文本。&lt;/p&gt;
&lt;p class="unselectable"&gt;嘿嘿，你不能选中这段文本！&lt;/p&gt;
&lt;p class="all"&gt;点击一次就会选中这段文本。&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
   <td>{{Spec2('CSS4 UI')}}</td>
   <td>初始值。也定义了 <code>-webkit-user-select</code> 作为一个不推荐使用的别名 <code>user-select</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">此页面上的兼容性表由结构化数据生成。 如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送a pull request。</div>

<p>{{Compat("css.properties.user-select")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{Cssxref("::selection")}}</li>
 <li>JavaScript 的 {{domxref("Selection")}} 对象。</li>
 <li><a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a> 中的 <a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> 章节。</li>
</ul>