CSS 如何使HTML文本不可选中

在本文中，我们将介绍如何使用CSS来禁止选择HTML文本。

阅读更多：CSS 教程

什么是文本选择？

当我们在网页上使用鼠标选中文本时，浏览器默认会启用文本选择功能。这意味着我们可以选择并复制文本，或者对被选中的文本执行其他操作。然而，有些时候我们希望禁止用户选择文本，例如在一些特定情况下，比如制作拼图游戏或在网站上展示敏感信息等。幸运的是，CSS提供了一种简单的方法来实现这一目标。

禁止用户选择文本

要禁止用户选择HTML文本，我们可以使用CSS的user-select属性。这个属性用于控制用户是否能够选择文本，并决定被选中文本的样式。要禁止文本选择，我们将user-select属性设置为none。

下面是一个示例：

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

在上面的例子中，我们使用了带有unselectable类名的选择器，并将user-select属性设置为none。这将阻止用户选择元素中的文本。

现在，我们可以在HTML中应用这个类，如下所示：

<p class="unselectable">这段文本不能被选中。</p>

这样，无论用户如何尝试选择文本，都无法选择这段文字。

选择性禁止文本

除了全局禁止文本选择的方法外，有时候我们可能只想禁止某些特定元素内的文本选择。在这种情况下，我们可以在需要禁止选择的元素上直接应用user-select: none;。

以下是一个例子：

<div class="container">
    <h1>这是一个标题</h1>
    <p>这是一个可以被选择的段落。</p>
    <p class="unselectable">这是一个不能被选择的段落。</p>
</div>

.unselectable {
    user-select: none;
}

在上面的例子中，我们在第二个段落上应用了unselectable类来禁止文本选择。其他元素仍然可以被选择。

在移动设备上禁止选择文本

对于移动设备上的网页，禁止选择文本也是很常见的需求。幸运的是，通过使用CSS，我们可以实现这一点。

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

在上面的例子中，我们添加了一个-webkit-touch-callout: none;属性。这将禁止在移动设备上长按文本时显示默认的选择菜单。

部分允许选择文本

有时候，我们希望禁止用户选择一部分文本，但允许选择其他部分。在这种情况下，我们可以使用CSS的::selection伪元素来指定被选择文本的样式。

以下是一个例子：

.unselectable::selection {
    background: none;
    color: inherit;
}

在上面的例子中，我们将被选择文本的背景设为透明，并继承文本的颜色。这将禁止选择文本时显示默认的高亮背景颜色，使文本看起来不可选择。

总结

在本文中，我们介绍了如何使用CSS使HTML文本不可选中。通过设置user-select属性为none，我们可以禁止整个页面或特定元素上的文本选择。另外，在移动设备上禁止选择文本可以通过添加-webkit-touch-callout: none;来实现。最后，我们还了解了如何通过修改::selection伪元素来部分允许选择文本。

无论是制作拼图游戏还是保护敏感信息，禁止用户选择文本都是CSS中很有用的功能。通过了解如何使用user-select属性，您可以更好地控制网页上的文本选择行为。