:disabled伪类仅对button、input、select、textarea、optgroup、option等原生可禁用表单元素生效，div/span等非表单元素即使添加disabled属性也不匹配；需确保disabled属性真实透传至合法dom节点，否则应改用[disabled]选择器或类名控制。
:disabled 伪类本身不屏蔽样式，而是专门用于“定义”禁用状态的样式——它只生效于原生可禁用元素，且必须真实存在 disabled 属性。
哪些元素能用 :disabled？
只有浏览器规范认定的“可禁用表单控件”才匹配：button、input、select、textarea、optgroup、option。其他如 div、span、a 即使写了 disabled="true"，:disabled 也完全不触发。
常见错误现象：
- 写
div:disabled { opacity: 0.5; }没反应 → 因为div不在规范支持列表里 - Vue 组件里
<mybutton :disabled="true"></mybutton>样式没变 → 检查最终渲染出的 HTML，确认disabled是否透传到了底层button标签上
:disabled 和 [disabled] 有什么区别？
两者都能选中带 disabled 属性的元素，但语义与兼容性不同：
-
:disabled是伪类，匹配“处于禁用状态”的语义，IE9+ 支持 -
[disabled]是属性选择器，只看属性是否存在，IE7+ 就支持（但对input[type="hidden"]这类本就不支持禁用的元素也会误匹配） -
disabled是布尔属性：写成disabled=""、disabled="false"或disabled="0"都算启用禁用态——只要属性存在，就禁用
为什么禁用后文字/背景颜色不一致？
各浏览器 UA 样式对 :disabled 的默认处理差异大：Chrome 可能只降 color，Safari 会同时压暗 background-color 和 color，Firefox 对 opacity 的继承行为也不统一。
可靠做法是显式重置关键视觉属性：
input:disabled {
color: #999;
background-color: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
opacity: 0.6;
}
注意：opacity 会影响整个元素及其子节点，若内部有图标或复合结构，可能比单独调色更难控制细节。
非原生元素怎么模拟禁用态？
封装组件、自定义按钮、div 容器等，必须放弃 :disabled，改用类名驱动：
- 加
class="is-disabled"或aria-disabled="true" - 配合
pointer-events: none屏蔽鼠标，但记得手动处理键盘焦点（tabindex="-1"）和语义（aria-disabled） - 功能层仍需 JS 判断，不能只靠样式拦截交互逻辑
最易被忽略的是：禁用态不只是视觉问题——它涉及焦点管理、表单提交过滤、屏幕阅读器播报，仅靠 CSS 模拟永远做不到原生 disabled 的完整语义链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
