Css 文字选中设置样式/Css 禁止文字选中

一、Css 禁止文字选中

 

CSS 语法

user-select: auto|none|text|all;

属性值

描述
auto 默认。如果浏览器允许,则可以选择文本。
none 防止文本选取。
text 文本可被用户选取。
all 单击选取文本,而不是双击。

 

使用案例:

        body {
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }

 

 

特别说明:不支持user-select的属性的浏览器可以使用js处理

document.body.onselectstart = document.body.ondrag = function(){

return false;

}

 

 

 

二、Css 设置选中文字样式

::selection 选择器匹配被用户选取的选取是部分。 更多伪类伪对象参考:https://www.cnblogs.com/tianma3798/p/15022761.html

只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

示例:

        p::selection{
            color: red;
            background: green;
        }

 

 

 

更多:

Css 伪类整理_Css 伪类对象整理_Css 伪类伪类对象使用

Css 选择器优先级整理_Css 选择器优先级详解

Css 文字垂直方向居中整理

posted @ 2021-08-12 09:36  天马3798  阅读(1206)  评论(0编辑  收藏  举报