initial commit

1 files changed, 145 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/user-select/index.html b/files/zh-cn/web/css/user-select/index.html
new file mode 100644
index 0000000000..8481741c5c
--- /dev/null
+++ b/files/zh-cn/web/css/user-select/index.html
@@ -0,0 +1,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>