在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯css来解决这个问题(IE10+),对于旧版本的就只能用js:onselectstart = 'return false;'这种方式。以下介绍一下-prefix-user-select:
Formal syntax: none | text | all | element
(-prefix-)user-select: none;  //全部都不可选择
(-prefix-)user-select: text;  //允许文本选择
(-prefix-)user-select: all;  //In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
(-prefix-)user-select: element;  //只有IE ff支持,无视…… 注意这属性不属于w3c标准!
  目前主要使用的是none & text
  假定结构如下:
<body>
<nav>
<dt>level 1</dt>
</nav>
<p>xxxxxxxxxxxxxxxxxxxx</p>
</body>

  CSS如下:

body{
-webkit-user-select: none;
} nav dt{
-webkit-user-select: text;
}

  结果是:p标签的文字不能选中,dt的文字则能正常选中。

  

 
												

CSS阻止文本选择的更多相关文章

  1. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  3. css构造文本

    1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...

  4. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  6. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  7. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  8. 复习-css控制文本字体属性

    css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...

  9. CSS关于文本渲染的属性text-rendering

    CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本. 浏览器会在渲染速度.易读性(清晰度)和几何精度方面做一个权衡. 我们知道,SVG-可缩放矢量图形(Scalab ...

随机推荐

  1. 网址测速JS

    /*.route_nav li a:hover{background: #3c7f84 url(title.png) no-repeat;border-color:#84a3a5;}*/ .route ...

  2. Python学习笔记五--条件和循环

    5.1 if语句 没什么好说,if语句语法如下: if expression: expr_true_suit 5.1.1多重条件表达式 单个if语句可以通过布尔操作符and,or,not实现多重条件判 ...

  3. Dom4j修改xml文档

    1. 写出内容到xml文档 XMLWriter writer = new XMLWriter(OutputStream, OutputForamt) wirter.write(Document); 2 ...

  4. 一次不是事故的SSH闪断问题

    从前一天下午的一个瞬间,公司内所有的ssh 连接在没有任何征兆的情况下,全部开始闪断. 折腾了一天,关闭过SELinux, 清空过Iptables,软硬重启过服务器,交换机,路由,重新配置过sshd文 ...

  5. HBase笔记--编程实战

    HBase总结:http://blog.csdn.net/lifuxiangcaohui/article/details/39997205  (very good) Spark使用Java读取hbas ...

  6. BZOJ 4407 于神之怒加强版

    http://www.lydsy.com/JudgeOnline/problem.php?id=4407 题意: 给下N,M,K.求 思路:  来自:http://blog.csdn.net/ws_y ...

  7. USB的逻辑值和用途值有什么区别?

    用途最小值,用途最大值.逻辑最小值,逻辑最大值分别是什么意思?如题: code uint8 ReportDescriptor[]= { //每行开始的第一字节为该条目的前缀,前缀的格式为: //D7~ ...

  8. c#—— Task.FromResult 的使用

    Task.FromResult用来创建一个带返回值的.已完成的Task. 场景一:以同步的方式实现一个异步接口方法 比如有一个接口包含异步方法. interface IMyInterface { Ta ...

  9. bootstrap栅格布局,第一次成功

    代码: <div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top ...

  10. crossdomain.xml跨越

    crossdomain.xml是adobe搞的,为了让flash跨域访问文件. 该配置文件放于服务器端的根目录下面.来设置让哪些域名下面的swf文件能够访问我服务器上的内容. 比如:我的服务器上有个图 ...