CSS阻止文本选择

时间 2019-12-12

标签 css 阻止文本选择栏目 CSS 繁體版

原文原文链接

　　在平常运用中，常常遇到点击按钮/菜单的时候，选中了文本，为了不这种状况，能够使用纯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以下：css

body{
    -webkit-user-select: none;
}    

nav dt{
    -webkit-user-select: text;
}

　　结果是：p标签的文字不能选中，dt的文字则能正常选中。html