CSS3 user-select 禁选文本

HTML5学堂：当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验，而我们可以用CSS3的user-select属性禁选文本来解决这个问题,另外为了防止用户的复制和转载,我们也可以使用user-select属性]解决这个问题.

请谨慎使用这个属性：因为大部分用户是来查看信息的，他们可以复制并存储下来以备将来之用，所以这种方法既无用也无效。如果你禁用了复制粘贴功能，用户还是可以通过查看源文件来获取到他们想要的内容。接下来我们具体来了解一下user-select属性。

欢迎沟通交流~HTML5学堂

基本语法：

user-select: value;

value取值：

auto默认值，用户可以选中元素中的内容

none用户不能选择元素中的任何内容

text用户可以选择元素中的文本

element文本可选，但仅限元素的边界内(只有IE和FF支持)

all在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中,IE不支持改值。

欢迎沟通交流~HTML5学堂

禁选文本书写方式：

我们先来看个效果：

1.结构代码

1. <div class="h5course">欢迎沟通交流 ~ HTML5学堂！</div>

2.样式代码

1. .h5course {
2.     -webkit-user-select: none; /*webkit浏览器*/
3.     -moz-user-select: none; /*火狐*/
4.     -ms-user-select: none; /*IE10*/
5.     -khtml-user-select: none; /*早期浏览器*/
6.     user-select: none;
7. }

3.查看效果

未禁用文本效果：

禁用文本效果：

欢迎沟通交流~HTML5学堂