HTML CSS 鼠標(biāo)選中

當(dāng)我們?cè)诰W(wǎng)頁(yè)中使用鼠標(biāo)進(jìn)行操作時(shí)，經(jīng)常會(huì)遇到一些鼠標(biāo)選中的效果。
這些效果可以通過(guò) HTML 和 CSS 實(shí)現(xiàn)，為用戶提供更好的交互體驗(yàn)。

html 中的 ::selection 偽類

HTML 中的 ::selection 偽類可以用來(lái)定義鼠標(biāo)選中文本時(shí)的樣式。
例如，以下的 CSS 代碼將在選中文本時(shí)將文本背景色設(shè)置為灰色，前景色設(shè)為白色：
::selection {
background-color: gray;
color: white;
}
注意，這個(gè)效果只能在部分瀏覽器下生效，例如 Safari、Chrome、Firefox、IE9+ 等。

CSS 中的 user-select 屬性

CSS 中的 user-select 屬性可以定義是否允許用戶選擇文本以及選中文本時(shí)的樣式。
user-select 屬性支持以下幾個(gè)值：
- none：不允許用戶選擇文本。
- text：允許用戶選擇文本。
- all：允許用戶選擇文本，并且選中文本時(shí)的效果與使用 ::selection 偽類相同。
例如，以下的 CSS 代碼將禁用用戶選中文本：
body {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
注意，這個(gè)效果只能在部分瀏覽器下生效，例如 Safari、Chrome、Firefox、Opera 等。

總結(jié)

通過(guò) HTML CSS 鼠標(biāo)選中，我們可以為用戶提供更好的交互體驗(yàn)，例如減少誤操作、強(qiáng)調(diào)重要文本等。
HTML 中的 ::selection 偽類和 CSS 中的 user-select 屬性都是實(shí)現(xiàn)鼠標(biāo)選中效果的常用方法。