使用 CSS 禁用内容选择

简介

在本实验中，我们将深入学习 CSS 编程并探索 user-select 属性。本实验旨在教你如何禁用网页中某些元素的选择功能，这在防止用户复制内容方面可能会很有用。完成本实验后，你将对如何使用 user-select 属性及其对网页设计的影响有更深入的理解。

Skills Graph

禁用选择

虚拟机中已提供了 index.html 和 style.css。

要使元素的内容不可选，可向选择器添加 CSS 属性 user-select: none。不过，这种方法并不能完全确保防止用户复制内容。

示例：

<p>你可以选中我。</p>
<p class="unselectable">你无法选中我！</p>

.unselectable {
  user-select: none;
}

请点击右下角的“Go Live”，在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成“禁用选择”实验。你可以在 LabEx 中练习更多实验来提升你的技能。