user-select的详细用法

前言

做网页的时候,有些文字我们需要能被选中,有些我们不要能被选中,那么这就需要用到一个css属性了,那就是 user-select

使用方法

user-select: none|auto|text|contain|all;
 
/*firefox浏览器*/
-moz-user-select: none|text|all;
 
/*safari、chrome浏览器*/
-webkit-user-select: none|text|all; /*Safari中不支持该属性值,只能使用none或者text,或者是在html的标签属性中使用*/
 
/*ie浏览器*/
-ms-user-select: none|text|element;
 
属性值:
none :  元素和子元素的文本将无法被选中

text :  文本可以被选中

auto :  文本将根据浏览器的默认属性进行选择

all  :  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素

contain、element :  可以选择文本,但选择范围受元素边界的约束,也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer

注意:
浏览器实现之间的区别之一是继承。在Firefox中,-moz-user-select不是由绝对定位的元素继承的,但在Safari和Chrome中,-webkit-user-select却是由绝对定位的元素继承而来的。

详情请浏览:user-select详细介绍

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,206评论 0 11
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • JavaScript 1. type 类型判断 isString (o) {//是否字符串 returnObjec...
    Mr_ZhangH阅读 646评论 0 1
  • 音乐智能——《小小探险家》 音乐智能可以培养小朋友们想象力创造力,能发展小朋友们听觉能力和记忆能力,还有语言能力哦...
    RYB塔塔班2阅读 241评论 0 0