为什么 CSS "*:not(textarea)"没有获取除文本区域之外的所有内容以禁用选择？

Question

我有一个简单的演示设置：

https://jsfiddle.net/9rsu7vnq/

<div>something</div>
<textarea>asdasdasd</textarea>
*:not(textarea){
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

注意，对于jsfiddle测试，在执行Ctrl+之前，您必须首先单击具有渲染输出的白色区域

我期望*:not(textarea)基本上禁用除textarea之外的所有内容的选择(使用ctrl+A(。因此，在本例中，textarea仍然会被选中，但div不应该被选中。但事实并非如此。它禁用对包括文本区域在内的所有内容的选择。

我做错了什么？

Answer 1

这是因为使用的css选择器也会影响周围的元素，如body和html。如果你排除它们，它会起作用：

*:not(textarea *):not(body):not(html) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

编辑：https://jsfiddle.net/Lrd3w4qe/1/

编辑2：显然只能在基于铬的浏览器中工作。

Answer 2

如果不需要用户选择，则可以禁用字段

<textarea disabled>asdasdasd</textarea>

Answer 3

请参阅下面有两个div的示例，它的工作方式与您从代码中期望的完全相同

div{
user-select: none;
}
#selectable {
user-select: auto;
}

<div>should not be selected while clicking ctrl+a</div>
<textarea id="selectable">Should be selected</textarea>