CSS 禁止文本选择

在本文中，我们将介绍如何使用CSS禁止用户对网页上的文本进行选择。禁止文本选择意味着用户无法通过鼠标选择、复制或粘贴网页上的文本内容。

阅读更多：CSS 教程

禁止文本选择的属性

要禁止文本选择，我们可以使用CSS属性user-select。该属性可以在特定元素或全局样式中设置。

1. 全局禁止文本选择

首先，让我们看看如何在整个网页中禁止文本选择。

body {
  user-select: none;
}

通过将user-select属性设置为none，我们可以禁止用户选择整个网页上的文本。请注意，这个属性会影响网页上所有的元素。

2. 特定元素禁止文本选择

如果我们只想禁止特定元素上的文本选择，可以直接在其样式中添加user-select属性。

h1 {
  user-select: none;
}

在上面的示例中，我们禁止了<h1>元素上的文本选择。同样，我们可以针对其他元素进行定制。

只禁止选中文本

除了完全禁止文本选择，有时我们只想阻止用户选中文本，但允许用户复制和粘贴。这可以通过将user-select属性设置为text来实现。

p {
  user-select: text;
}

在上面的示例中，我们只允许用户选择<p>元素中的文本，其他元素的文本选择将被禁用。

禁止选择链接文本

有时我们希望用户无法选择链接中的文本。我们可以通过以下代码块来禁用这个功能。

a {
  user-select: none;
}

通过上述代码，我们禁止了所有链接的文本选择。这可以防止用户选择并复制链接中的文本。

禁止拖动选中文本

在某些情况下，我们可能还想禁止用户拖动选中文本。这可以通过禁用user-drag属性来实现。

p {
  user-drag: none;
}

上述代码将禁止用户拖动<p>元素中的文本。这样，用户将无法通过拖动选择单词或段落。

示例代码

接下来，我们将创建一个演示，展示如何使用CSS禁止文本选择。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      user-select: none;
    }

    h1 {
      user-select: none;
    }

    p {
      user-select: text;
      user-drag: none;
    }

    a {
      user-select: none;
    }
  </style>
</head>
<body>
  <h1>禁止文本选择示例</h1>

  <p>这是一个段落，你可以复制这段文本，但无法选择其他部分。</p>

  <p>这是另一个段落，你只能选择这里的文本。</p>

  <a href="https://example.com">这是一个链接</a>
</body>
</html>

在上面的示例中，我们禁止了整个网页、标题、链接之外的文本选择。我们还禁止了拖动选择段落中的文本。

通过在浏览器中打开上述示例，您可以看到禁止文本选择的效果。