在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯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. python中的列表和字典

    列表和字典的区别: 列表是有序排列的一些物件,而字典是将一些物件(键)对应到另外一些物件(值)的数据结构; 应用场景: 字典 各种需要通过某个值去查看另一个值的场合,也就是一个虚拟的“查询表”,实现方 ...

  2. mvc 生成输出url

    最近一直在学习mvc,其中对于 Url.Action生成的url感到很困惑.官方的解释的基于路由方案生成的url.问题是,怎样基于,怎样选择,没有过多的解释.网上找了很多资料,也看不懂,最后还是在pr ...

  3. 针对access数据库的增删改查

    1.执行查询操作:(ExecuteReader方法) string myConnectionString = "Provider = Microsoft.Jet.OLEDB.4.0;Data ...

  4. Qweb报表中的Reload from Attachment参数

    通过继承的方式修改了Qweb报表却发现没有生效,经查,其原因在于报表的设置中勾选了 Reload from Attachment 选项. 将本选项取消选中即可生效.

  5. 转:memcpy的用法总结

    1.memcpy 函数用于 把资源内存(src所指向的内存区域) 拷贝到目标内存(dest所指向的内存区域):拷贝多少个?有一个size变量控制拷贝的字节数:函数原型:void *memcpy(voi ...

  6. JVM虚拟机栈和本地方法栈溢出测试

    弄JAVA,那JVM,JAVA语法,JDK库,JAVAEE,流行框架是一个都不能少,才可以有全局感的. JVM高级特性这书,看得差不多了.慢慢实践. /** * * *VM Args: -Xms20m ...

  7. 【转】java读写二进制文件的解决方法

    原文网址:http://www.jb51.net/article/36940.htm 接口:Writerable 复制代码代码如下: package com.geoway.pad.common; im ...

  8. Razor 在JS中嵌入后台变量

    HTML 中定义全局变量 @{ int CurrentUserId =ViewBag.CurrentUserId; } JS中取值方式var CurrentUserId = parseInt(@Htm ...

  9. JavaScript学习笔记(高级部分—01)

    JavaScript的核心ECMAScript描述了该语言的语法和基本对象:DOM描述了处理网页内容的方法和接口:BOM描述了与浏览器进行交互的方法和接口. 简单说,ECMAScript描述了以下内容 ...

  10. String 和 InputStream 互转方式

    /** * 利用BufferedReader实现Inputstream转换成String <功能详细描述> * * @param in * @return String */ public ...