使用自定义CSS属性实现元素禁用效果不生效如何解决？

问题原因 #

1. @property规则用法完全错误：@property是CSS中用来注册自定义属性的规则，仅支持syntax、inherits、initial-value三个合法配置项，你在@property --btn-disable块内写的cursor、pointer-events、color等普通样式规则会被浏览器直接忽略，不会生效。
2. 自定义变量未与实际样式绑定：自定义CSS属性本身只是一个存储值的变量，不会自动触发任何样式变化。你仅给.user类设置了--btn-disable: 0，但没有编写对应的选择器规则将这个变量的值和禁用样式关联，因此就算变量被赋值，也不会产生禁用效果。
3. 样式优先级冲突：第三个元素同时应用了.admin和.user类，两个类都设置了color属性，优先级相同的情况下后定义的样式会覆盖先定义的，加上没有绑定变量对应的禁用样式，因此不会出现禁用效果。

解决方案 #

第一步：修正@property定义 #

仅保留合法的自定义属性配置项：

@property --btn-disable {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

第二步：将自定义变量与禁用样式绑定 #

编写通用规则，当--btn-disable值为1时应用禁用样式，你可以根据需求选择以下两种实现方式：

兼容性写法（支持所有现代浏览器）

* {
  cursor: auto;
  pointer-events: auto;
  color: inherit;
  background-color: transparent;
}

.user {
  color: red;
  /* 开启禁用效果 */
  --btn-disable: 1;
}

/* 绑定变量和样式 */
[class*="user"]:where(--btn-disable: 1) {
  cursor: not-allowed;
  pointer-events: none;
  color: #c0c0c0;
  background-color: rgb(229, 229, 229) !important;
}

.btn-disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: #c0c0c0;
  background-color: rgb(229, 229, 229) !important;
}

更灵活的变量切换写法

如果需要动态切换禁用状态，可以用CSS变量映射样式：

* {
  cursor: var(--custom-cursor, auto);
  pointer-events: var(--custom-pointer, auto);
  color: var(--custom-color, inherit);
  background-color: var(--custom-bg, transparent);
}

.user {
  color: red;
  --btn-disable: 1;
  /* 变量为1时赋值禁用样式对应的变量 */
  --custom-cursor: not-allowed;
  --custom-pointer: none;
  --custom-color: #c0c0c0;
  --custom-bg: rgb(229, 229, 229) !important;
}

第三步：处理优先级冲突 #

如果需要.user类的禁用样式优先级高于.admin，可以将.user相关的样式规则放在.admin规则之后，或者给.user选择器增加优先级（比如写成input.user）。

内容的提问来源于stack exchange，提问作者Hasan A Yousef