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