CSS的被選中文字效果,是指在鼠標(biāo)拖拽選擇文本的過程中,選取的文本呈現(xiàn)出不同的樣式,讓用戶可以清晰地看到自己選擇的文本內(nèi)容。在CSS中,我們可以使用selection
偽類來(lái)控制被選中文字的樣式。
下面是一個(gè)簡(jiǎn)單的例子,我們給p
標(biāo)簽添加selection
樣式,使得被選中的文字呈現(xiàn)出灰色背景和紅色字體顏色:
p::selection { background-color: #BEBEBE; color: red; }
我們可以在瀏覽器中嘗試選中文本,看看效果是否生效。如果生效了,那么被選中的文字將會(huì)呈現(xiàn)出灰色背景和紅色字體顏色。
除了控制顏色之外,selection
偽類還可以控制文字的其他樣式,比如字體大小、字重、字體樣式等等。下面是一個(gè)例子,我們將被選中的文字變成粗體,并加大字號(hào):
p::selection { font-weight: bold; font-size: 24px; }
同樣地,我們可以在瀏覽器中嘗試選中文本進(jìn)行驗(yàn)證。如果樣式生效了,那么被選中的文字將變成粗體并加大字號(hào)。
除了p
標(biāo)簽之外,其他元素也可以使用selection
偽類控制被選中文字的樣式。但需要注意的是,像input
、textarea
等表單元素,其被選中文字的樣式通常由瀏覽器自帶樣式控制,我們需要使用!important
聲明來(lái)覆蓋這些默認(rèn)樣式。