CSS 属性

CSS user-select 属性确定用户是否可以选择文本，而不影响作为浏览器用户界面 (chrome) 的一部分加载的内容（文本框除外）。

虽然 user-select 不是继承的，但其初始“auto”值通常使其表现得就像是继承的一样。 基于 WebKit/Chromium 的浏览器将该属性实现为继承，这违反了规范并会导致问题。 Chromium 一直在解决这些问题以符合指定的行为。

属性值

  • none: 元素和子元素的文本不可选，但这些元素可能出现在 Selection 对象中。

  • auto: auto 值确定如下:

    • ::before 和 ::after 伪元素使用的值为 none。

    • 对于可编辑元素，使用的值为 contains。

    • 如果该元素具有用户选择值 all，则使用的值为 all。

    • 如果此元素的父元素具有用户选择值 none，则使用的值为 none。

    • 使用的值为文本。

  • text- 用户可以选择文本。

  • contains: 允许在元素内开始选择，但包含对该元素边界的选择。

  • all: 元素的内容必须以原子方式选择:如果Selection 包含元素的一部分，它还必须包含其所有后代。如果在子元素中发生双击或上下文单击，则将选择具有该值的最高祖先。

适用范围

所有元素。

语法

user-select: none | auto | text | contain | all;

CSS user-select: none 

以下示例演示了 user-select: none 属性阻止用户选择文本−

<html>
<head>
<style> 
   .text-none {
      -webkit-user-select: none; 
      user-select: none;
   }
</style>
</head>
<body>
      <p>该文本应该是可选择的。</p>
    <p class="text-none">无法选择此文本。</p>
</body>
</html>

CSS user-select: auto 

以下示例演示用于选择文本的 user-select: auto 属性 −

<html>
<head>
<style> 
   p {
      -webkit-user-select: auto; 
      user-select: auto;
   }
</style>
</head>
<body>
   <p>该文本应该是可选择的。</p>
</body>
</html>

CSS user-select: text 

以下示例演示了 user-select: text 属性允许用户选择文本 -

<html>
<head>
<style> 
   p {
      -webkit-user-select: text; 
      user-select: text;
   }
</style>
</head>
<body>
   <p>该文本应该是可选择的。</p>
</body>
</html>

CSS user-select: all 

以下示例演示了用户选择:all 属性允许用户单击一次即可选择文本 -

<html>
<head>
<style> 
   p {
      -webkit-user-select: all; 
      user-select: all;
   }
</style>
</head>
<body>
    <p>只需单击一下即可选择此文本。</p>
</body>
</html>

CSS user-select: contains 

以下内容示例演示了 user-select: contains 属性允许用户选择段落边界内的文本 -

<html>
<head>
<style> 
   p {
      -webkit-user-select: contain; 
      user-select: contain;
   }
</style>
</head>
<body>
    <p>可以在段落边界内选择此文本。</p>
</body>
</html>