css - 在排除一类的同时使所有内容都不可选择

Question


<style>
*:not(.selectable){
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selectable{
-webkit-touch-callout: auto!important;
-webkit-user-select: auto!important;
-khtml-user-select: auto!important;
-moz-user-select: auto!important;
-ms-user-select: auto!important;
user-select: auto!important;
}
</style>


如何使用 class="selectable" 制作所有内容？可选择的？目前无法使用光标选择任何内容。

我本以为!Important会覆盖 css 设置，但它不会!

Answer 1

您不必添加规则 .selectable。*:not(.selectable) 应该足以完成您的功能。

但是，通用选择器和 :not() 否定不会影响特异性引用 (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Selector_Types)，因此您需要添加一些元素以便覆盖浏览器默认值。您可以做的是删除通用选择器并将其更改为 html 或 body。

来自

*:not(.selectable){}

到

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

fiddle 一样 https://jsfiddle.net/nuf7wfj4/