CSS 禁用文本选择

CSS 提供了一种控制文本选择行为的方式，通过设置 user-select 属性可以禁用文本选择。在本篇教程中，我们将介绍如何使用 CSS 来禁用文本选择。

什么是文本选择

文本选择是指在网页上通过鼠标或键盘操作选中文本内容的行为。默认情况下，用户可以通过拖拽鼠标或使用键盘来选择网页中的文本。然而，在某些情况下，禁用文本选择可能是有用的，比如为了保护网站的内容不被复制等。

使用 user-select 属性禁用文本选择

CSS 中的 user-select 属性可以用来控制文本选择行为。该属性有以下几个可能的取值：

• none：禁用所有文本选择。
• text：允许文本选择，默认值。
• element：允许文本选择，但只在元素级别。
• all：允许文本选择，并且会应用到元素内所有的子元素上。

以下是一个使用 user-select 属性禁用文本选择的示例：

/* 禁用所有文本选择 */
body {
    user-select: none;
}

通过将 user-select 属性设置为 none，可以禁用整个 body 元素的文本选择。

注意事项

• user-select 属性可以应用于任何元素，不仅限于 body 元素。
• 请注意，user-select 属性并不是 CSS 标准的一部分，它是一个供浏览器厂商实现的非标准属性。因此，它可能不被所有浏览器完全支持或存在一些兼容性问题。

总结

通过使用 CSS 的 user-select 属性，我们可以轻松地控制网页上的文本选择行为。通过设置为 none，我们可以禁用文本选择，从而保护网站的内容不被复制。

参考资料

• CSS user-select 属性