css - 使文本在不可选择的 div 内可选择

Question

在我的页面中，借助这个 css（我从 stackoverflow 它自己获得），我使整个 div 不可选择

    .unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

现在我在这个不可选择的 div 中有一个 h2 标签。我希望 h2 成为可选择的。有什么方法可以轻松实现这一点。

我在我的问题中忘记了一些事情。我的代码中有三个 h2，我需要特定的一个可选，所以我向这个 h2 添加了一个类，并尝试了类似 .unselectable:not(.class-of-h2) 的东西（我从下面的答案中得到）。但它不工作

Answer 1

用于您的 h2 元素

.unselectable h2{
 -moz-user-select: text;
 -khtml-user-select: text;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

看演示

Answer 2

只需添加以下CSS

.unselectable h2 {
   -moz-user-select: text;
   -khtml-user-select: auto;
   -webkit-user-select: auto ;
   -ms-user-select: auto;
   user-select: auto;
 }

查看演示

Answer 3

您可以使用

     .unselectable:not(h2:nth-child(2)) {
      //your data
      } 

not可以从您的选择器列表中排除该元素，
这可以使您的整个 div 无法选择，除了 h2 元素。