:read-only仅匹配含真实readonly布尔属性的文本类input和textarea，不支持select、button等；JS赋值readOnly=true无效，须setAttribute('readonly', '')；disabled优先级高于read-only，且IE全系不支持该伪类。
只读输入框必须带 readonly 属性，不是 JS 赋值就能触发
浏览器只认 DOM 中真实存在的 readonly 布尔属性，el.readOnly = true 或 el.setAttribute('readonly', 'true') 都不如 el.setAttribute('readonly', '') 可靠——后者确保属性写入且值为空，是 UA 判定的唯一依据。Safari ≤15.3 对 input[type="number"] 有漏匹配 bug，select、button、div 即使加了 readonly 也完全不响应 :read-only。
:read-only 和 :read-write 不是互为反义词
:read-write 匹配的是「当前真正可编辑」的状态，不是简单地「没写 readonly」：
• input[type="radio"]、input[type="hidden"]、input[type="file"] 永远不匹配 :read-write
• input[disabled] 即使没 readonly，也不匹配 :read-write
• div[contenteditable="true"] 在多数浏览器中不响应 :read-write，得用 [contenteditable="true"] 属性选择器兜底
• input:not([readonly]) 是纯属性筛选，和 :read-write 行为完全不同，别混用
样式冲突时 :disabled 永远赢过 :read-only
如果一个 input 同时有 readonly 和 disabled，:disabled 样式一定生效，:read-only 完全被忽略——这不是优先级问题，而是浏览器 UA 规则：disabled 元素不参与 :read-only 或 :read-write 匹配。常见错误是误用 disabled 替代 readonly 来“视觉禁用”，结果表单值不提交、无法聚焦、文本不可选。只读场景该用 readonly + :read-only，彻底禁用才用 disabled。
别指望 :read-only 自动禁用文本选择或焦点行为
:read-only 只是一个样式钩子，它不会改变交互逻辑：
• 默认仍允许鼠标选中文本，要禁止得加 user-select: none
• 仍会接收 Tab 焦点，若不想停留，需手动设 tabindex="-1"
• 不影响右键菜单，复制粘贴依然可用，真要封锁得靠 JS 监听或 oncopy 阻止
• IE 全系不支持，Vue/React 中要确认最终渲染的 HTML 确实含 readonly 字样，而不是仅靠响应式绑定
立即学习“前端免费学习笔记（深入）”；
