:disabled伪类不匹配只读输入框，因它仅响应disabled属性，与readonly无关；只读状态应使用input[readonly]或input:read-only选择器。
:disabled 伪类对只读输入框不生效，是因为它根本不匹配只读输入框——:disabled 只响应 disabled 属性，和 readonly 完全无关。
只读 ≠ 禁用，浏览器语义上严格区分
HTML 中 readonly 和 disabled 是两个独立布尔属性，各自触发不同伪类：
-
input[readonly]或input:read-only匹配只读状态（仍可聚焦、可选中文本、值参与表单提交） -
input:disabled仅匹配显式设置了disabled属性的元素（失焦、不可交互、值不提交） -
这种写法虽合法，但此时:disabled生效，:read-only被忽略——不是“不生效”，而是根本没机会匹配
常见误判场景：你改了 JS 属性，但 DOM 没变
很多人在 JS 里写 el.readOnly = true 或 el.disabled = true，以为样式会自动更新。但：
-
el.readOnly = true不会自动添加readonly属性到 DOM，:read-only不触发 -
el.disabled = true会同步设置 DOM 属性，所以:disabled能响应——但前提是目标元素是原生可禁用控件（input、button、select等） -
div[disabled]或自定义组件加disabled属性无效：:disabled不支持非表单元素
为什么你写了 input:disabled 却看不到效果？
不是选择器写错了，而是元素压根没带 disabled 属性。检查 DevTools 的 Elements 面板，确认目标 input 标签上是否真实存在 disabled 字样（不是 readonly，也不是 data-disabled）。
- 若用 Vue/React，确保
:disabled="true"或disabled={true}正确渲染为 HTML 属性（而非仅作为 prop 传入） - 若父级有
fieldset[disabled]，子input会被禁用交互，但自身不满足:disabled条件——得写fieldset:disabled input才能命中 -
input[type="number"]等特殊类型在 Safari/Chrome 中可能忽略background-color，优先试color和border-color
别用 :disabled 给只读控件写样式，换更稳的方案
想给只读输入框统一加样式，最可靠的是直接用属性选择器：
input[readonly] {
background-color: #f9f9f9;
color: #666;
cursor: not-allowed;
}
它兼容所有浏览器（包括 IE8+），不依赖 CSS 伪类解析逻辑，也不受 contenteditable 或 JS 属性赋值干扰。而 :read-only 在旧 Safari 和部分 Android WebView 中支持不稳定，且对 、 等完全无效——这些地方只能靠 class 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
