Question

我刚刚将PC和Mac上的Google Chrome升级到版本62，并且CSS属性user-select: all已正常停止工作。

如果您的父级user-select设置为无，且user-select的子级设置为all，则不会正确覆盖父级属性。

-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;

是否有其他人经历过此操作并知道这是否是新版Google Chrome中的错误，或者是否有正确的方法来实现此功能？

以下是演示此问题的代码（使用Chrome 62查看问题） - JSFiddle：

div {
  margin: 5px;
}
.parent {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.child {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

<div class="parent">
  <div class="child">
    Parent has user-select set to none, Try to select this text
  </div>
</div>

<div class="child">
  No parent, Try to select this text
</div>

Answer 1

这是Chrome浏览器的问题。这个bug已经报道了。您可以在this bug report上找到有关该错误的更多详细信息（非工作示例）。

在修复错误之前，您可以使用一些JavaScript来获取行为。请参阅this answer on StackOverflow。

另一种非JavaScript解决方案如下：

.parent :not(.selectable-all) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectable-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

<div class="parent">
  <span>user-select set to none and not selectable all.</span>
  <div class="child selectable-all">
    Parent has user-select set to none, Try to select this text
  </div>
</div>

<div class="child selectable-all">
  No parent, Try to select this text
</div>

Answer 2

尝试将user-select:all更改为user-select:text

CSS：

div {
  margin: 5px;
}

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

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

演示：https://jsfiddle.net/lotusgodkk/12jfpzys/2/

Answer 3

我刚刚找到了解决这个问题的简单方法，如下所示：

======================

在CSS文件中，有以下内容：

.noSelect
{
  -webkit-touch-callout:none; /* iOS Safari */
  -webkit-user-select:none;   /* Chrome/Safari/Opera */
  -khtml-user-select:none;    /* Konqueror */
  -moz-user-select:none;      /* Firefox */
  -ms-user-select:none;       /* Internet Explorer/Edge */
  user-select:none;           /* Non-prefixed version */
}

.allowSelect
{
  -webkit-touch-callout:text; /* iOS Safari */
  -webkit-user-select:text;   /* Chrome/Safari/Opera */
  -khtml-user-select:text;    /* Konqueror */
  -moz-user-select:text;      /* Firefox */
  -ms-user-select:text;       /* Internet Explorer/Edge */
  user-select:text;           /* Non-prefixed version */
}

.allowSelectOneClick
{
  -webkit-touch-callout:all; /* iOS Safari */
  -webkit-user-select:all;   /* Chrome/Safari/Opera */
  -khtml-user-select:all;    /* Konqueror */
  -moz-user-select:all;      /* Firefox */
  -ms-user-select:all;       /* Internet Explorer/Edge */
  user-select:all;           /* Non-prefixed version */
}

======================

在HTML文件中，您现在可以拥有以下内容（例如）：

<div id="container1" class="noSelect">
    <div id="container2" class="noSelect">
        <div id="container3" class="noSelect">

            <div id="myTextContainer" class="allowSelect">

                <div id="myTextToBeSelectedByOneClick" class="allowSelectOneClick">
                    Hello World!
                </div>

            </div>

        </div>
    </div>
</div>

在ID“myTextContainer”（具有“allowSelect”类）的div中包装ID“myTextToBeSelectedByOneClick”（具有类“allowSelectOneClick”）的div是使其工作的技巧。

没有ID“myTextContainer”的div，它不起作用。

======================

以上内容在Chrome版本65.0.3325.181

中进行了测试

在此处试试：https://jsfiddle.net/ecg3opnq/13/

Answer 4

确保您的孩子没有：all: none重置所有属性，就像我一样。如果是all: none以下的情况，只需添加user-select: none（Chrome）。

用户选择：所有继承在chrome 62

4 个答案: