在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯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. 使用Jstl异常:The absolute uri: http://java.sun.com/jsp/jstl/core cannot&nbs

    错误提示是:        org.apache.jasper.JasperException: This absolute uri http://java.sun.com/jsp/jstl/core ...

  2. 最难忘的Bug调试经历

    摘要:目前,著名的社区问答网站Quora上出现一个很火的讨论:你调试过最难的Bug是什么?大家纷纷留言,把自己最痛苦的一次调试经验写下来. 相信每位程序员都有过一段不堪回首地Bug调试经历,程序员一听 ...

  3. 8.2.1.13 Multi-Range Read Optimization 多个range 读优化

    8.2.1.13 Multi-Range Read Optimization 多个range 读优化 读记录使用一个range scan 在一个secondary index 可以导致很多的随机磁盘访 ...

  4. Button 对象

    <html> <form> <input type="button" value="提交" accesskey="b&q ...

  5. weblogic迁移随手记

    新建域的脚本weblogic  登录缓慢监听地址的修改,hosts修改vim +/securerandom /usr/java/jdk1.7.0_71/jre/lib/security/java.se ...

  6. MyBatis的简单操作

    这里将的是简单的增.删.改.查等基本操作 首先创建java项目,导入相应的依赖包,这里可以参考上一篇博客 1.添加数据 在jike.book.pojo包中,新建java类 JiKeUser.java: ...

  7. ubuntu 创建eclipse 快捷方式

    Ubuntu 上链接快捷方式,将想面内容复制并修改,命名为:eclipse.desktop #!/usr/bin/env xdg-open [Desktop Entry] Name=Eclipse C ...

  8. WP独立文件资源字典

    有时候,开发者想把资源字典定义在单独的XAML文件中,在网上找了找,没找到比较详细的,自己弄了许久. 1. 新建xaml资源字典文件,如在根目录下“ResourceDictionary1.xaml”, ...

  9. Mongodb 条件查询

    1.1 查询出所有数据的指定键(name ,age ,country) db.persons.find({},{name:1,age:1,country:1,_id:0}) 2.查询条件 2.查询条件 ...

  10. Node.js 博客实例(六)留言功能

    原教程https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 实现用户给文章留言的功能,留言保存在数据 ...