HTML CSS 鼠標選中

當我們在網頁中使用鼠標進行操作時，經常會遇到一些鼠標選中的效果。
這些效果可以通過 HTML 和 CSS 實現，為用戶提供更好的交互體驗。

html 中的 ::selection 偽類

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

CSS 中的 user-select 屬性

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

總結

通過 HTML CSS 鼠標選中，我們可以為用戶提供更好的交互體驗，例如減少誤操作、強調重要文本等。
HTML 中的 ::selection 偽類和 CSS 中的 user-select 屬性都是實現鼠標選中效果的常用方法。