将用户的选择控制在你的手中-user-select

前言

在敲打自己的个人博客时，在博客的详情页，对于不同的内容，我是想有不同的复制方式的。例如代码块我就想读者单击就可以复制，这样方便读者本地调试，而对于文字描述部分，希望可以不允许读者复制。作为一个坚定的能用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;
      }