[分享]css不允许用户选中

CSS中有一个属性userselect可以让开发者控制用户是否能够选中网页中的文字。常用的属性值有三种：none、auto和text。其中，text是默认值，表示用户能够选中页面中的文字。而使用non...

CSS中有一个属性user-select可以让开发者控制用户是否能够选中网页中的文字。常用的属性值有三种：none、auto和text。其中，text是默认值，表示用户能够选中页面中的文字。

而使用none值可以禁止用户选中文字。比如，可以使用下面的代码让一段文字无法选中：

 p {
        -webkit-user-select: none;  /* Chrome/Safari/Opera */
        -moz-user-select: none;     /* Firefox */
        -ms-user-select: none;      /* IE/Edge */
        user-select: none;          /* 所有浏览器 */
    } 

值得注意的是，虽然使用了user-select: none让网页中的文字无法被选中，但是页面的内容仍然能够被复制。这个时候，用户只需要使用鼠标右键点击文字，选择“复制”即可把文字复制到剪切板中。

在实际的开发中，禁止用户选中文字的场景有很多。比如，有些网站希望用户不要轻易的复制文字内容，防止抄袭。又比如，在游戏界面中可能希望一些元素无法被选中，以免影响游戏体验。