携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 Johnny

在网页上，我们通常不应该禁用文本选择，但在某些情况下启用它会影响用户体验。通常，我们不想剥夺用户选择文本的能力，因为这会导致糟糕的用户体验。曾经有一段时间，少数网站会阻止用户复制文章文本作为阻止抄袭的一种方法，但是，这种情况在今天已经不常见了。话虽如此，有很多例子表明禁用文本选择实际上可以改善用户体验。例如：

在触发事件的 HTML 元素上，尤其是在移动设备上 - 点击或双击可能会导致文本选择
在拖放界面上，用户必须拖动元素 - 我们不希望该拖动也触发文本选择。
在许多其他自定义 Web 构建的用户应用程序中，文本选择需要仅限于某些元素或情况。例如，在文本编辑器上，我们通常不希望使文本变为粗体的按钮是可选的，因为它是一个按钮。幸运的是，如果需要，CSS 中有一种简单的方法可以禁用某些元素上的文本选择。

如何在 CSS 中禁用文本选择

所有现代浏览器（某些版本的 Safari 除外）都支持该user-select属性，这使得任何 HTML 元素都无法选择。例如，如果你希望所有按钮都不可选，可以编写以下内容：

button {
    -webkit-user-select: none;
    user-select: none;
}

我们必须使用-webkit-user-select，因为 Safari 仍然需要它。如果想支持 Internet Explorer（退市），您还可以使用-ms-user-select：

button {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

这个单一属性将停止用户选择。user-select理论上，它还具有其他属性，但对这些属性的支持各不相同。

user-select: none- 没有用户选择元素。
user-select: text- 您只能选择元素内的文本
user-select: all- 点击一次将选择整个元素内容。
user-select: auto- 默认情况下，您可以像往常一样选择所有内容。对这些中的每一个的支持各不相同，可以在 caniuse 上找到对用户选择的完整、最新的支持列表。

使用CSS 禁用文本选择

如何在 CSS 中禁用文本选择