文本不可选择的 CSS

当我们在网页开发中，有时候需要让文本内容不可被用户选中，这时候就需要使用 CSS 来给文本添加不可选择属性。本文将介绍如何在 CSS 中实现文本不可选择的功能。

选择器

在 CSS 中，我们可以使用以下两个选择器来选择文本：

• ::selection：选择文本中被高亮显示的部分。
• ::-moz-selection：选择 Firefox 浏览器中文本被高亮显示的部分。

CSS 属性

我们可以使用以下 CSS 属性来设置文本不可选择：

• user-select: none;：该属性指定元素中的文本是否可以选中。若设置为 none，则文本不可被选中。这个属性适用于所有元素，包括 ``元素。
• webkit-user-select: none;：该属性会禁止 Chrome 和 Safari 浏览器中选中文本（针对元素中的文本）。这个语句在 Safari 浏览器中将失效。
• -moz-user-select: none;：禁止 Firefox 浏览器中选中文本。
• pointer-events: none;：这个属性不仅禁止鼠标点击一个元素，同时也禁止了一切与鼠标有关的事件和动作（例如，拖放、选择文本等）。

/* 例：文本不可选 */
.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

示例

以下代码展示了如何使用 user-select 属性让文本不可选择：

/* 禁止选中文本 */
.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<!-- HTML 代码 -->
<p class="unselectable">这段文本不能被选中。</p>

结论

使用 CSS 的 user-select 属性可以非常方便地为文本添加不可选择属性。而其他的属性也可以通过类似的代码实现文本不可选择的效果。在实际项目中，我们可以结合实际需要，选取合适的属性来达到满足项目需求的效果。