试一试
user-select: none;
user-select: text;
user-select: all;
<section id="default-example">
<p id="example-element">Try to select this text</p>
</section>
#example-element {
font-size: 1.5rem;
}
语法
css
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;
注意： user-select 不是一个继承属性，尽管初始值 auto 使它在大多数时候表现得像继承一样。基于 WebKit/Chromium 的浏览器确实将此属性实现为继承的，这违反了规范中描述的行为，并将带来一些问题。到目前为止，Chromium 选择修复了这些问题，以使最终行为符合规范。
值
none-
元素及其子元素的文本不可选择。请注意，
Selection对象可以包含这些元素。 auto-
auto的实际值确定如下：- 在
::before和::after伪元素上，实际值为none。 - 如果此元素的父元素的
user-select实际值为none，则实际值为none。 - 否则，如果此元素的父元素的
user-select实际值为all，则实际值为all。 - 否则，实际值为
text。
- 在
文本-
文本可以被用户选择。
all-
元素的内容应原子化地选择：如果选择包含元素的一部分，则选择必须包含整个元素，包括其所有后代。如果在子元素中发生双击或上下文点击，则将选择具有此值的最高祖先。
注意： CSS 基本用户界面模块为 user-select 属性定义了 contain 值，以允许选择从元素内部开始并由该元素的边界包含，然而，这在任何浏览器中都不受支持。
正式定义
正式语法
user-select =
auto |
text |
none |
contain |
all
示例
HTML
html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
CSS
css
.unselectable {
-webkit-user-select: none; /* Safari */
user-select: none;
}
.all {
-webkit-user-select: all;
user-select: all;
}
结果
规范
| 规范 |
|---|
| CSS Basic User Interface Module Level 4 # 内容选择 |
浏览器兼容性
加载中…
另见
::selection伪元素- JavaScript
Selection对象