大家好，我是半夏?，一個剛剛開始寫文的沙雕程式設計師.如果喜歡我的文章，可以關注➕ 點贊 ? 加我微信：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;
}
選中後的效果如下：
