::selection 選取狀態僞元素 - 讓你沒有選擇困難 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 15

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 15 篇

::selection 選取狀態僞元素 - 讓你沒有選擇困難

11th鐵人賽 css css教學網頁教學金魚

CSScoke

2019-09-30 13:11:46

5677 瀏覽

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

前一天看完了常見的 ::before 與 ::after 僞元素之後，我們繼續來看看另外一個少見的僞元素選取器 ::selection，這個僞元素特別之處如同該字面上的意思就是選取的狀態，在早期的網頁當使用者選取到一段文字的時候，那個反白色彩都是由瀏覽器自行決定的，所以有時候就會出現反白色彩背景與文字對比不足導致閱讀困難的情況，但現在我們總算可以利用這個選取器來自訂我們的配色了，這樣讓視覺設計師可以有更多的~~工作負擔~~設計發揮了，真的是視覺設計師的好武器啊！

設定的彈性

::selection 選取器作為一個選取狀態的選取器，在這種將文字反白的狀況可想而知的是屬性變化應該不會支援太多才對，但其實算起來還不少，總共有以下八種之多呢

color (文字色彩)
background-color （背景色彩）
cursor （滑鼠游標）
caret-color （閃動標點）
outline （外框線）
text-decoration （文字裝飾）
text-emphasis-color （文字加重強調符號色彩）
text-shadow （文字陰影）

說到這大家應該還是無感這個狀態會是怎樣的視覺效果，不多說直接進原始碼伺候

HTML

<p>我沒有設定選與效果，色彩由瀏覽器內定</p>
<p class="BG-gray-T-red">我選取狀態下色彩由我決定，背景變灰，文字變紅</p>

CSS

.BG-gray-T-red::selection{
	color: red;
	background-color: gray;
}

上面例子中當使用者使用滑鼠反白選取文字時第一個段落會是瀏覽器預設的外觀，而第二個段落則會是呈現由我所設定的灰底紅字，這樣應該非常清楚 ::selection 的作用了吧！

那些不常用到的值

caret-color

這個值其實有點冷門，一般人算是比較少會去設定的，這是用來設定插入點的那個閃動光標色彩的，就那個一閃一閃亮雞精的豎線啊。不多說上原始碼來看

<input type="text" name="" id="">

CSS

input{
  caret-color: #fa0;
}
input::selection{
  color: #fa0;
}

上面的例子當使用者點擊了表單文字欄位時，就能夠看到閃動的豎線標點（插入點）的色彩變成了 Amos 所設定的橙色了，所以意思就是我們可以設定我們選取文字之後的插入點色彩，是不是很有趣啊。

Text-emphasis-color

text-emphasis-color 這個屬性是設定強調文字符號的色彩，但是當我們沒有設定強調文字的時候，基本上也無效啊，所以我們需要多學一個 text-emphasis屬性，這個屬性可以設定「加重強調符號」的樣式，兩者一合併之後就會像是下面這個樣子了

HTML

<p>Amos 所撰寫與錄製的<span>金魚都能懂的 CSS 選取器</span>真是太棒了！這樣的好文應該用力給它訂閱下去啊，林貢丟無丟啊！！！</p>

CSS

span{
  -webkit-text-emphasis:'坑';
  text-emphasis: '坑';
}
span::selection{
  -webkit-text-emphasis-color: red;
  background-color: #ffa;
}

上面例子當你選取到 span 內的文字的時候，你會發現文字上方的坑字加重符號改變色彩為我設定的紅色了。

實際應用

老實說這個選取器多數的設計師應該都不太會去在意，但的確有少數的設計師會對設計吹毛求疵到這些小細節都注意到，事實上 Amos 在多年前就想設定這個屬性了，但當時尚未有這屬性可使用，一切都只能飲恨敲碗捶心肝，現在有了這選取器之後，我想...我用到的機會還是不多啦，但至少知道這選取器之後也可以備而不用，等哪天有需要時，就可以直接用上啦，Amos 還遇到不少這一類備了很久卻沒啥機會的用上的屬性在某些特殊時刻解了我難以克服的狀況。基本上各位願意看到這段話的話，我想多少腦袋裡面都有一個印象了，沒關係，忘記時再回來看看吧。

以上就是今天的金魚都能懂的 CSS 選取器 - ::selection 選取狀態僞元素，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～