网站内容复制(想复制这段文本的时候：我后面有个1我前面有角标 )

　　网站内容复制(想复制这段文本的时候：我后面有个1我前面有角标

)

　　前言

　　在我的个人博客上打字时，在博客的详细信息页面上，我希望有不同的方式来复制不同的内容。比如我想让读者一键复制代码块，方便读者本地调试，而对于文字说明部分，希望读者不能复制. 作为一个会用CSS但不会用JS的坚定的极端主义者，我终于在CSS3中找到了user-select。

　　兼容性

　　用户选择

　　用于控制用户是否可以选择文本。选择全部，选择一些。

　　全选

　　在很多情况下，用户想要的是一次性复制完整的内容，比如一段代码、密码、一些密钥。

　　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;

}

复制代码

　　 点击试试看

const num = 1;

const result = (function () {

delete num;

return num;

})();

console.log(result);

const num = 1; const result = (function () { delete num; return num; })();

console.log(result);

复制代码

　　但是all也有一个尴尬的缺点，只要你设置了all，那么你就不能选择部分内容。

　　禁止选择

　　对于网页中的元素，可以使用 user-select:none; 禁止用户选择内容。

　　部分选择

　　为什么会有这样的说法？对于普通网页，我们可以选择特定的内容。例如，在下面的页面中，我们可以选择部分内容，

　　但是这里的标题部分主要是指对侧不能选择的元素。比如html中有这样一个标签sup，这个标签主要是用来给元素添加角标的。

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

复制代码</p>

　　当你想复制这段文字时：我身后有一个角标1，我前面有一个角标，这个角标也会被复制。

　　这时候就需要设置角标，这样设置也可以保证当你的p标签是user-select:all的时候，copy也会忽略角标！

　　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;

}

复制代码

　　选择的效果如下：