在HTML5中你如何使用CSS建立不可选的文字

在 HTML5 中，我们可以使用 CSS 的 user-select 属性来建立不可选的文字。下面是一个完整攻略，包含了如何使用 CSS 建立不可选的文字的过程和两个示例说明。

CSS 如何建立不可选的文字

我们可以使用 CSS 的 user-select 属性来建立不可选的文字。user-select 属性控制用户是否可以选择文本。将 user-select 属性设置为 none 可以防止用户选择文本。下面是一个示例：

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

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

上述代码中，我们使用 user-select 属性将文本设置为不可选。我们将 .unselectable 元素的 -webkit-user-select、-moz-user-select、-ms-user-select 和 user-select 属性都设置为 none，以确保在不同的浏览器中都能够生效。

示例说明

下面是两个示例，演示如何使用 CSS 建立不可选的文字。

示例一：使用 user-select 属性

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

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

上述代码中，我们使用 user-select 属性将文本设置为不可选。我们将 .unselectable 元素的 -webkit-user-select、-moz-user-select、-ms-user-select 和 user-select 属性都设置为 none，以确保在不同的浏览器中都能够生效。

示例二：使用 user-select 属性

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

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

上述代码中，我们使用 user-select 属性将文本设置为不可选。我们将 .unselectable 元素的 -webkit-user-select、-moz-user-select、-ms-user-select 和 user-select 属性都设置为 none，以确保在不同的浏览器中都能够生效。我们还将 .unselectable 元素的 cursor 属性设置为 default，以使其在鼠标悬停时不会显示为文本选择光标。