css 设置不能选中文本 user-select 属性使用说明

通过 css 属性 user-select: none; 能让用户无法在你的网页上选中文本。这样同时也能起到无法复制的效果。

案例1

你可以在全局样式中添加如下属性，这样你的整个网页就都无法选中。

            :root {
                user-select: none;
            }
        

案例2

你也可以将它只应用在某个元素上。例如：

html:

            <p>你可以选中这段文本。</p>
            <p class="unselectable">你不能选中这段文本！</p>
            <p class="all">点击一次就会选中这段文本。</p>
        

css:

            .unselectable { user-select: none; }
            .all { user-select: all; }
        

效果如下：

注意：目前此案例在 Safari 浏览器中不生效

更多

user-select 属性的更多用法可参考：MDN:user-select