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 文字垂直方向居中整理