在 CSS 中, 可以使用 user-select 属性来设置页面元素不可被选中. 下面本篇文章以将页面中 p 标签内的文字不能被选中为例, 讲解 CSS 怎么让页面上的内容不能被选中.
在 CSS 中, 可以通过设置 user-select: none; 来禁止选中元素, 让页面元素无法被选中.
user-select 属性是 css3 新增的属性, 用于设置或检索是否允许用户选中文本; 可用于除替换元素外的所有元素.
示例讲解:
新建一个 html 文件, 命名为 test.HTML, 用于讲解 CSS 怎么让页面上的内容不能被选中.
在 test.HTML 文件内, 使用 p 标签创建多行文字, 用于下面进行测试.
在 test.HTML 文件内, 给 p 标签添加一个 class 属性, 用于通过该 class 设置 p 标签的 CSS 样式 .
在 test.HTML 文件内, 编写 < style type="text/css"></style > 标签, 页面的 CSS 样式将写在该标签内.
在 CSS 标签内, 通过 class(testpp) 设置页面文字的 CSS 样式, 将 user-select 属性设置为 none, 实现页面内容不被选中效果.
user-select 属性对部分低版本浏览器可能存在不兼容问题, 因此, 可以添加兼容的样式提高代码的兼容性. 代码如下:
在浏览器打开 test.HTML 文件, 查看实现的效果.
总结:
1, 在 CSS 样式中, 将 user-select 属性设置为 none, 实现内容不可被选中.
2, 为了提高样式的兼容性, 可以同时使用 "-webkit-user-select:none;-moz-user-select:none-ms-user-select:none;" 来设置页面内容的样式.
注意事项
也可以通过 "*" 星号设置页面所有内容不可被选中.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17640.html