我們在頁面輸入的文本按理來說應該都是可以選中的，但是如何才能讓顯示出來的文本或是圖片不被選中呢，這時候就需要用到 user-select 屬性。
user-select
user-select （CSS屬性），控制着用戶能否選中文本。除了在文本框中，在 Chrome瀏覽器中對已經加載的文本沒有影響。
一、語法：
user-select：none / text / all / element / auto
user-select 屬性的默認值為 text，沒有繼承性，適用於替換元素外的所有元素。
二、屬性值：
none：文本不能被選中。注意這個 Selection 對象包含這些元素。從 Firefox21 開始，none表現的想 -moz-none，因此可以使用 -moz-user-select ：text 在子元素上重新啟用選擇。
text：默認值，可以選中文本
all：當所有內容可以作為一個整體被選擇。（如果雙擊或是在上下文上點擊子元素，那么包含該元素的子元素也將被選中。）
element：可以選擇文本，但是選擇范圍受元素邊界的約束
auto：auto的計算值確定如下：
- 在::before 和 ::after 偽元素上，計算的屬性是 none
- 如果元素是可編輯元素，則計算值是 contain
- 否則，如果此元素的父元素的 user-select 的計算值為 all，則計算值為 all
- 否則，如果此元素的父級上的 user-select 的計算值為 none，則計算值為 none
- 否則，計算值則為 text
注：Selection對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區，可能橫跨多個元素。文本選區由用戶拖拽鼠標經過文字而產生。
注意：在不同瀏覽器之間實現的一個區別是繼承。 在Firefox中，-moz-user-select不會被絕對定位的元素繼承，但在Safari和Chrome中，-webkit-user-select由這些元素繼承。
三、設置或檢索是否允許用戶選中文本
IE6-9不支持該屬性，但是支持使用標簽屬性 onselecstart = 'return false;' 來達到 user-select: none 的效果。Safari 和 Chrome 也支持該標簽屬性。
直到Opera12.5 仍然不支持該屬性，但是和 IE6-9一樣，也支持私有的標簽屬性 unselectable = 'on' 來達到 user-selector：none 的效果；unselectable 的另外一個值是 off；
除了 Chrome 和 Safari外，和在其他瀏覽器中，如果將文本設置為 -ms-user-select：none; 則用戶將無法在該文本塊中開始選擇文本。不過，如果用戶在頁面的其他區域開始選擇文本，則用戶仍然可以繼續選擇將文本設置為 -ms-user-select：none; 的區域文本。
四、瀏覽器兼容性：
紅色：no supported （不支持）
綠色：supported （支持）
綠色有黃色標識：supported width prefix （支持但需要前綴）
五、實例：
HTML
<p>你應該可以選中這段文本。</p>
<p class="unselectable">你不能選中這段文本!</p>
CSS
.unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
參考資料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
https://www.html.cn/book/css/properties/user-interface/user-select.htm#a3