CSS：禁用容器上的选择，启用子容器上的选择（不适用于Firefox）

因此，以下内容适用于Chrome，但不适用于FireFox：

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input {
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

有没有一种方法可以禁用对容器元素的选择，但允许选择表单输入之类的内容？

几点建议（尝试创新）

1.试着简单地写下：

:not(input) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

此规则应适用于除

输入

之外的所有内容，这样就不需要另一条规则来恢复输入行为（可能在某些FF版本上失败？）

---

2.如果这不能解决问题，请尝试在用户选择上使用透明背景的

-moz selection/selection

伪类进行欺骗

::-moz-selection { background: transparent; color: #000; }
::selection      { background: transparent; color: #000; } 

input::-moz-selection { background: blue; color: #fff; }
input::selection      { background: blue; color: #fff; } 

---

出于可用性的考虑，请避免此类限制：它们通常令人恼火，如果有人真的想选择并复制你页面上的文本，他可以从源代码视图轻松地完成这项工作。嗯，并不是所有的FF版本都支持这个伪类。我这么做的原因是因为在这个“web应用程序”中，我想保留一些类似于应用程序的外观，让除了输入之外的所有内容都可以选择。但这并不是绝对必要的，只是一种审美偏好。

-moz选项

从Firefox 1开始就得到了支持，对不起，我指的是“：not”选择器。这就是为什么我建议两种不同的方法：）