CSS中,我們可以用偽類來設置某一個元素的特定狀態下的樣式,比如:hover來設置鼠標懸停在元素上時的樣式,但有時候我們不希望某些元素被用戶選中,特別是文字內容。比如我們有一段文本,如果用戶在選中這段文本后復制了它,那么復制出去的效果可能與我們網頁上的設計不符,這時候我們就需要用到CSS來控制不選中字體顏色。
/* 設置div中的文字被選擇時的背景顏色為透明,文字顏色為黑色 */ div::selection { background-color: transparent; color: black; } /* 設置p標簽中的文字被選擇時的背景顏色為透明,文字顏色為black */ p::selection { background-color: transparent; color: black; } /* 設置全局的文字被選擇時的背景顏色為透明,文字顏色為黑色 */ ::selection { background-color: transparent; color: black; }
上述代碼中,我們用偽類::selection來設置當用戶選中文字時的樣式,其中background-color設置背景色為透明,就是不設置背景色,color設置文字顏色為黑色,這樣就可以避免用戶復制網頁中的文本時出現不符合設計的情況了。
需要注意的是,不選中字體顏色并不是一定有效,因為用戶可以通過一些方法繞過這種設置。但它仍然是一個對保護我們網站的設計有幫助的工具,而且操作簡單,一般不需要太復雜的CSS代碼就可以實現。