This is an explanation of the video content.
 Everything to games
Spanning time and space ...
...
8

 |   | 

CSS使得元素不可选择和复制

在CSS中，可以通过以下代码使得元素不可选择和复制：

-webkit-user-select: none; /* Chrome、Safari 和较新的 Opera 浏览器 */
-moz-user-select: none; /* Firefox 浏览器 */
-ms-user-select: none; /* IE 10+ 浏览器 */
user-select: none; /* 标准语法 */

代码解释

  • -webkit-user-select：适用于基于 WebKit 的浏览器，如 Chrome 和 Safari。
  • -moz-user-select：适用于 Firefox 浏览器。
  • -ms-user-select：适用于 IE 10 及更高版本的浏览器。
  • user-select：是标准的 CSS 属性，适用于支持该属性的现代浏览器。

使用示例

假设你有一个段落元素，希望用户无法选择和复制其中的内容，可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不可选择和复制的元素</title>
    <style>
        .unselectable {
            -webkit-user-select: none; /* Chrome、Safari 和较新的 Opera 浏览器 */
            -moz-user-select: none; /* Firefox 浏览器 */
            -ms-user-select: none; /* IE 10+ 浏览器 */
            user-select: none; /* 标准语法 */
        }
    </style>
</head>
<body>
    <p class="unselectable">这段文字无法被选择和复制。</p>
</body>
</html>

注意事项

  • 虽然这些 CSS 属性可以防止用户通过鼠标选择和复制内容，但它们并不能完全阻止用户通过其他方式（如开发者工具）获取内容。
  • 在某些情况下，完全禁止用户选择和复制内容可能会影响用户体验，因此需要谨慎使用。

user-select: none

8 🌐Frontend ↦ CSS开发技巧 __ 113 字
 CSS开发技巧 #7