css - 用户选择 : all inheritance not working in chrome 62

Question

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

如果您的父项的 user-select 设置为 none，而子项的 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 浏览器的问题。该错误已被报告。您可以在 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>