CSS 不允许选中

在Web开发中，很多时候我们希望页面上的一些元素不能被用户通过鼠标或键盘选中，这样可以避免一些不必要的麻烦或者提升用户体验。CSS 提供了一种很简单的方式来阻止用户选中页面上的文字或者其他元素，即通过 user-select 属性来控制。在本文中，我们将详细讨论如何使用 CSS 来实现不允许选中的效果。

user-select 属性

user-select 属性是CSS3中引入的一个属性，用于控制用户是否可以选中页面上的文本。它有以下几个取值：

auto：默认值，表示用户可以选择文本。
none：表示用户不可以选择文本。
text：表示用户可以选择文本，但不包括元素内部的子元素。

防止文本被选中

如果我们希望防止页面上的文本被选中，可以通过以下CSS代码来实现：

.prevent-select {
    user-select: none;
}

在上面的代码中，我们定义了一个类名 .prevent-select，并将 user-select 属性设置为 none。这样，添加了这个类名的元素及其内部的文本都将无法被选中。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent text selection</title>
<style>
.prevent-select {
    user-select: none;
}
</style>
</head>
<body>
<p class="prevent-select">This text cannot be selected.</p>
</body>
</html>

效果如下：

This text cannot be selected.

防止元素被选中

除了防止文本被选中，有时候我们还希望防止某个元素被选中。可以使用相同的方法，将 user-select 属性设置为 none，如下所示：

.prevent-select-element {
    user-select: none;
}

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent element selection</title>
<style>
.prevent-select-element {
    user-select: none;
}
</style>
</head>
<body>
<div class="prevent-select-element">
    <p>This element cannot be selected.</p>
</div>
</body>
</html>

效果如下：

This element cannot be selected.

只允许部分文本被选中

有时候，我们希望页面上的一部分文本可以被选中，而另一部分不可以。这时可以通过 user-select 属性的 text 值来实现。例如，下面的代码中只有 Selectable text 可以被选中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Allow partial text selection</title>
<style>
.partial-select {
    user-select: text;
}
.prevent-select {
    user-select: none;
}
</style>
</head>
<body>
<p class="partial-select">Selectable text</p>
<p class="prevent-select">Unselectable text</p>
</body>
</html>

效果如下：

Selectable text

Unselectable text