CSS中的user-select

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/09/13/CSS%E4%B8%AD%E7%9A%84user-select/

摘要

本文主要讲述了：

语法
作用

正文

语法

auto 缺省值
none 无法选中
all 单击选中

注：user-select默认并不能被子元素继承，由于auto，表现得像是继承

作用

控制用户是否能选中网页中的文本

注：

不影响<input>、<textarea>等表单控件
伪元素始终不可选中

示例：

learn_css/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <p>hello, jsweibo</p>
      <p class="auto">hello, auto</p>
      <p class="none">hello, none</p>
      <p class="all">hello, all</p>
    </div>
    <style>
      p::before {
        content: 'before';
      }
      p::after {
        content: 'after';
      }

      .auto {
        user-select: auto;
      }
      .none {
        user-select: none;
      }
      .all {
        user-select: all;
      }
    </style>
  </body>
</html>