CSS设置全局文本禁选后指定类可选中写法不生效如何解决

你直接把.selectable加入:not()参数列表的写法是错误的，失效原因有两个：

• 兼容性问题：2018年之前的多数Webkit内核浏览器、IE浏览器不支持:not()伪类传入多个选择器参数，只会识别括号内的第一个选择器，后续排除规则完全不生效
• 选择器覆盖不全：就算浏览器支持多参数:not()，规则也只会排除本身带.selectable类的元素，该元素内部的子元素因为不带这个类，依然会被通配符*命中，被加上不可选中属性，同时user-select本身是可继承属性，子元素会继承父级的不可选中状态，最终导致文本还是无法选中

不要在通配选择器的:not()里堆叠排除项，拆分两层规则写即可兼容所有场景：

/* 全局默认设置所有元素不可选中 */
* {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 放行需要支持选中的元素，以及这些元素内部的所有子元素 */
input,
textarea,
.selectable,
.selectable * {
  -webkit-touch-callout: default;
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

• 该写法完全规避了:not()多参数的兼容问题，所有支持user-select属性的浏览器都能正常识别
• 额外增加的.selectable *选择器，会覆盖.selectable元素内部所有子节点的样式，不会出现子元素继承父级不可选中属性的问题
• 两段规则权重完全一致，后写的放行规则会自动覆盖前面的全局不可选中规则，不存在优先级冲突

内容的提问来源于stack exchange，提问作者vespino