使用 CSS 禁用内容选择

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") subgraph Lab Skills css/selectors -.-> lab-35189{{"`使用 CSS 禁用内容选择`"}} end

禁用选择

虚拟机中已提供了 index.htmlstyle.css

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

示例:

<p>你可以选中我。</p>
<p class="unselectable">你无法选中我!</p>
.unselectable {
  user-select: none;
}

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

总结

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

您可能感兴趣的其他 CSS 教程