CSS 在不可选择的div内使文本可选择

在本文中，我们将介绍如何使用CSS在一个不可选择的div内使文本可选择。有时候，我们可能会遇到一个需要让用户选择其中一部分文本的情况，但又不希望用户选择整个div。这时，我们可以使用一些CSS技巧来实现这个需求。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用user-select属性

user-select属性是一个CSS3属性，用于控制用户是否可以选择文本。一般情况下，这个属性默认为auto，即用户可以选择文本。但是，当我们想要禁止用户选择整个div时，我们可以使用none值来设置user-select属性。

.unselectable {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

在上面的代码中，我们给一个div添加了一个名为.unselectable的class，并在其中设置了user-select: none;来禁止用户选择文本。现在，这个div内的所有文本将不再可选择。

然而，我们还想要让其中的某些文本可选择。我们可以通过给这些文本添加一个父级元素并设置该元素的user-select属性来实现。下面是一个例子：

<div class="unselectable">
  这是一段不可选择的文本，但是其中的
  <span class="selectable">这是可选择的文本</span>
  可以被选中。
</div>

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

.selectable {
  -webkit-user-select: text; 
  -moz-user-select: text; 
  -ms-user-select: text; 
  user-select: text;
}

在上面的例子中，我们给要使其可选择的文本添加了一个class名为.selectable的span元素，并设置了user-select: text;，让用户可以选择其中的文本。这样，用户在选择文本时，只有这个span元素内的文本会被选中。

使用JavaScript选择文本

如果以上的CSS方法不适用于你的情况，你还可以使用JavaScript来实现选择特定文本的功能。下面是一个使用JavaScript选择文本的简单例子：

<div class="unselectable" id="myDiv">
  这是一段不可选择的文本，但是你可以选择其中的一部分。
</div>

<button onclick="selectText()">选择文本</button>

<script>
  function selectText() {
    let div = document.getElementById("myDiv");
    let selectText = div.firstChild;
    let range = document.createRange();
    range.selectNodeContents(selectText);
    let selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
</script>

在上面的例子中，我们给不可选择的div添加了一个id名为myDiv。然后，我们创建了一个按钮，当按钮被点击时，调用selectText()函数。在该函数中，我们获取到了div的第一个子节点，创建了一个选择范围并将其设为选中状态。这样，用户就可以选择其中的文本了。

需要注意的是，如果使用JavaScript来选择文本，可能需要更多的逻辑来处理不同浏览器之间的兼容性问题。

总结

通过使用CSS的user-select属性，我们可以控制文本的可选性。当我们想要在一个不可选择的div内使文本可选择时，可以使用user-select: none;来禁止选择整个div，并通过给特定文本元素添加父级元素来使其可选择。如果CSS方法不适用，我们也可以使用JavaScript来选择文本。无论是使用CSS还是https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript，我们都可以满足用户选择特定文本的需求。