:disabled伪类仅对原生表单元素生效，需配合disabled属性使用；禁用非表单元素应使用类名+pointer-events:none及aria-disabled。
直接用 :disabled 伪类就能给原生按钮设置禁用样式，关键是要匹配到真正带 disabled 属性的元素，而不是靠类名“假装”禁用。
只对原生表单控件生效
:disabled 是浏览器原生支持的状态伪类，仅作用于 <button>、<input>、<select>、<textarea> 这类有 disabled 属性的表单元素。普通 <div> 或自定义组件加了 disabled 属性也不会触发该伪类。
- ✅ 正确写法：
button:disabled { cursor: not-allowed; opacity: 0.6; } - ❌ 无效写法：
div:disabled { ... }（浏览器完全忽略）
视觉上要和启用状态明显区分开
浏览器默认的禁用样式很弱，用户容易误点。建议主动覆盖，从颜色、透明度、光标、边框、阴影几方面强化提示：
- 用
opacity: 0.5~0.7降低整体明度，但别低于 0.4，否则影响可读性 - 设
cursor: not-allowed，鼠标悬停时明确显示禁止符号 - 背景色调灰（如
#e0e0e0），文字色变浅（如#999），避免用纯黑或高对比色 - 移除
box-shadow和border的交互态效果（比如 hover 阴影、聚焦轮廓）
配合 JavaScript 动态控制才真正禁用
CSS 只改外观，不阻止点击行为。必须同步操作 DOM 的 disabled 属性，才能让按钮既“看起来不能点”，也“实际点不动”：
立即学习“前端免费学习笔记（深入）”；
- 禁用：
btn.disabled = true或btn.setAttribute('disabled', '') - 启用：
btn.disabled = false或btn.removeAttribute('disabled') - 注意：仅加 CSS 类（如
.disabled）不会禁用表单提交或键盘聚焦，必须靠原生disabled属性
需要禁用非表单元素？用类名 + pointer-events
如果禁用的是 <div>、<a> 或封装的组件按钮，就得换思路：
- 加一个自定义类，比如
.btn--disabled - CSS 中写：
.btn--disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } -
pointer-events: none是关键，它让元素彻底不响应任何鼠标事件（包括 click、hover、focus） - 注意：该属性不影响键盘焦点，如需完整禁用，还需加
tabindex="-1"和aria-disabled="true"
