span 标签不支持 disabled 属性，:disabled 伪类对其无效，因其非表单控件；应使用 is-disabled 类 + aria-disabled="true" + 事件拦截实现禁用效果。
span 标签本身不支持 disabled 属性，直接写 span disabled 或 span.disabled="true" 不会触发任何原生禁用行为，CSS 的 :disabled 伪类也完全不会匹配它——浏览器压根不认。
为什么 span:disabled 永远不生效
HTML 规范里，:disabled 只作用于可表单控件（button、input、select、textarea、optgroup、option），span 不在其中。哪怕你用 JS 强行加 disabled="" 属性，DOM 上看着像，样式和语义都不被识别。
常见错误现象：
- 写了
span:disabled { opacity: 0.4; }，但样式死活不出现 - 用 jQuery 的
.prop("disabled", true)操作span，控制台没报错，但毫无反应 - 屏幕阅读器仍把该
span当作普通文本朗读，不提示“已禁用”
正确做法：用自定义 class 控制视觉 + 行为拦截
给 span 加禁用感，必须靠显式 class + 手动控制交互逻辑：
- 添加一个语义清晰的 class，比如
is-disabled或text-disabled - CSS 中写
span.is-disabled规则，设置opacity、color、cursor: not-allowed - 如果它本应响应点击（比如模拟按钮），JS 中需在事件 handler 开头加判断：
if (el.classList.contains("is-disabled")) return; - 对可访问性敏感的场景，补上
aria-disabled="true"（注意：不是disabled属性）
示例：
<span class="action-text is-disabled" aria-disabled="true">删除此条</span>
<style>
.action-text {
color: #333;
cursor: pointer;
}
.action-text.is-disabled {
color: #999;
opacity: 0.6;
cursor: not-allowed;
}
</style>
<script>
document.querySelector(".action-text").addEventListener("click", function(e) {
if (this.getAttribute("aria-disabled") === "true") return;
// 正常处理逻辑
});
</script>
别只靠 filter: grayscale() 做禁用状态
filter: grayscale(1) 看似省事，但问题一堆：
- Safari 旧版本会渲染成全黑或严重偏色，必须加 fallback，比如同时设
opacity: 0.6和color: #888 - 它不改变鼠标指针，用户悬停时还是默认箭头，体验割裂
- 键盘焦点仍能落到该元素上（
tabindex未被禁用），盲人用户可能误操作 - 滤镜是绘制层效果，无法替代语义；屏幕阅读器完全感知不到“禁用”含义
真正可用的禁用文字，必须三者同步：视觉（class）、行为（事件拦截）、语义（aria-disabled）。
最易被忽略的一点：很多人只改了颜色或透明度，却忘了加 cursor: not-allowed。用户鼠标悬停时没反馈，第一反应是“是不是卡了”，而不是“它不能点”。这个细节，比灰度值调到 0.8 还重要。
