关于css:纯CSS如何禁止用户复制网页的内容

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏,理解更多前端常识! 点我摸索新世界！

原文链接 ==>http://sylblog.xin/archives/70

前言

在敲打本人的集体博客时，在博客的详情页，对于不同的内容，我是想有不同的复制形式的。例如代码块我就想读者单击就能够复制，这样不便读者本地调试，而对于文字描述局部，心愿能够不容许读者复制。作为一个动摇的能用CSS绝不上JS的极其份子，我最终找到了CSS3中的user-select。

兼容性

user-select

用来管制用户是否能够选中文本。全选，局部选中。

全选

在很多时候用户心愿的可能是一次性复制残缺的内容，例如一段代码，明码，一些key。

user-select:all : 让用户能够单击选中元素。

这里咱们演示了三个不同的Html标签下的成果。

 h2 {
        user-select: all;
      }

      code {
        user-select: all;
        width: 500px;
        display: block;
        padding: 10px;
        color: #31808c;
        background-color: #f5f4ef;
      }

      div {
        user-select: all;
      }

  <h2>点击试试看</h2>
    <pre>
        <code>
        const num = 1;

        const result = (function () {
          delete num;
          return num;
        })();
        
        console.log(result);
        </code>
    </pre>
    <p>
      const num = 1; const result = (function () { delete num; return num; })();
      console.log(result);
    </p>

不过all同样存在一个令人难堪的毛病，只有你设定了all，那你就不能选中局部内容。

禁止选中

对于网页中的元素，能够应用user-select: none; 禁止用户选中内容。

局部选中

为啥会有这个说法吗，对于通常的网页，咱们是能够抉择特定的内容的。例如在上面的页面中，咱们就能够局部抉择内容，

然而这里的题目的局部，次要是指在对立面无奈选中的元素。例如html中有这样一个标签sup,这个标签次要是用来给元素增加角标。

    <p>我前面有个角标<sup>1</sup>我后面有角标</p>

当你想复制这段文本的时候：我前面有个角标1我后面有角标，这个角标也会被复制下来。

此时咱们就须要针对角标设置,这样设置还能够保障当你p标签是user-select:all的时候，复制也会疏忽角标！

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

扩大：设置选中式样

CSS提供了::selection`伪元素来设置文本抉择的款式

您能够通过定位::selection伪元素来设置文本抉择的款式。然而，只有上面的几个属性能够设置：

color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color (en-US)
text-shadow

例如

p::selection {
  color: #fffaa5;
  background-color: #f38630;
  text-shadow: 2px 2px #31808c;
}

选中后的成果如下：