[CSS] 使用 user-select 來設定是否可以選取或直接全選

在網頁裡面我們想要選取一段文字，應該都很習慣連點兩次可以選擇一個單字，連點三次的話可以把整個段落都選取起來，而 CSS 裡有提供一個方法讓我們可以修改預設的選取功能，就是 user-select。

有幾種值可以設定，預設為 auto，也就是原本的選擇效果，不過 auto 會在不同地方有不同的顯示方式：

* 在 ::before 和 ::after 偽元素上，採用的屬性值是 none
* 如果元素是可編輯元素，則採用的屬性值是 contain
* 如果此元素的父元素的 user-select 採用的屬性值为 all，則該元素採用的屬性值也為 all
* 如果此元素的父元素的 user-select 採用的屬性質為 none，則該元素採用的属性值也為 none
* 如果以上的條件都不存在，則採用的屬性值為 text

而各個值代表的意思又如下：

all: 直接選取整塊元素的內容
none: 無法選取
text: 預設的選取方式

直接看範例的使用結果：