<a>标签不支持disabled属性，需用pointer-events: none+filter: grayscale(1)+aria-disabled="true"+移除href等组合实现语义化禁用。
disabled 属性对 <a> 标签根本不起作用
HTML 规范里，<a> 标签没有 disabled 属性——浏览器会忽略它，既不会禁用点击，也不会触发伪类 :disabled。你写的 <a disabled> 看似合理，实际是无效 HTML，CSS 里的 a:disabled 永远不匹配。
常见错误现象：加了 disabled 却还能点、样式没变、控制台没报错但逻辑失效。
- 真正能响应
:disabled的只有表单控件：<button>、<input>、<select>、<textarea> - 想“禁用”链接，必须换思路：用
pointer-events: none阻断交互 + 手动加灰阶样式 - 语义上，禁用的链接本就不该是
<a>；更合适的是<span>或带role="link"的元素
用 grayscale() 给链接去色要配合 filter 和状态标记
grayscale() 是 filter 函数，不是独立属性。直接写 grayscale: 100% 会失效；必须写成 filter: grayscale(100%)。但它本身不感知交互状态，得靠 class 或属性手动切换。
使用场景：用户权限不足、功能暂不可用、加载中临时置灰等需要视觉+交互双重反馈的情况。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
:hover或:active——禁用状态下这些伪类通常也不该触发 - 推荐用自定义 class（如
is-disabled）控制样式，比用属性选择器更可靠 -
filter会影响子元素，如果链接里有图标或图片，它们也会被去色 - 性能影响小，但旧版 Safari 对
filter渲染略慢，可加will-change: filter微调
示例：
/* 正确写法 */
a.is-disabled {
pointer-events: none;
filter: grayscale(100%);
opacity: 0.6;
cursor: not-allowed;
}为什么不用 color: #999 简单去色？
纯改 color 只影响文字，对背景图、SVG 图标、border、box-shadow 等完全无效；而真实项目里链接常带 icon、badge 或底色，只调文字色会显得不一致、不专业。
filter: grayscale() 是全元素像素级处理，一招覆盖所有视觉层，且与设计系统中“禁用态”的统一定义更吻合。
- 注意兼容性：IE 完全不支持
filter，如需支持 IE，得回退到 class 控制多属性（color、background、border-color分别设灰） -
grayscale(100%)和grayscale(1)等价，后者更简洁，但前者语义更直白 - 如果链接用了
background-image，filter仍生效；但如果是 CSS 渐变背景，部分老 Chrome 版本可能渲染异常
禁用链接的交互反馈不能只靠视觉
光灰阶+禁指针还不够。用户可能尝试键盘操作（Tab + Enter），或屏幕阅读器会读出“链接”却无法跳转，造成困惑。
- 必须移除
href属性，或设为href="#"并阻止默认行为（不推荐后者） - 加上
tabindex="-1"防止键盘聚焦，或用aria-disabled="true"+role="link"做语义补充 - 如果禁用是临时的（如加载中），建议用
aria-busy="true"替代disabled类语义 - 最稳妥的做法：禁用时用
<span role="link" aria-disabled="true">替代<a>，再配样式
容易被忽略的是：灰阶只是视觉提示，真正的禁用逻辑在 JS 层是否拦截点击、后端是否校验权限——CSS 再准，也挡不住绕过前端的请求。
