:read-only没生效是因为元素未真实进入只读状态，需检查三件事：DOM中是否有readonly属性、元素是否为支持类型（input文本类或textarea）、浏览器是否兼容；它不响应JS赋值，仅匹配HTML属性。
为什么:read-only没生效？先查这三件事
不是选择器写错了，而是元素根本没进入:read-only状态。它只响应 HTML 属性，不认 JS 属性或逻辑禁用。
- 打开 DevTools → Elements 面板，确认目标
<input>或<textarea>标签上**真有readonly字样**（哪怕没值，readonly=""也行） -
<select>、<button>、<input type="hidden">、<input type="checkbox">全都不支持:read-only—— 写了也白搭 - 别用
el.readOnly = true动态赋值就完事；得同步调用el.setAttribute('readonly', '')，否则 SSR 或初始渲染可能漏样式
:read-only 和 [readonly] 到底该用哪个？
两者都能选中只读输入框，但机制和兼容性不同，不能混着当一回事用。
-
input[readonly]是属性选择器：只要 HTML 里写了readonly就匹配，IE8+ 全支持，行为确定 -
input:read-only是伪类：匹配“当前真实只读状态”，JS 改el.readOnly = false后样式立刻消失，但 Firefox 要写input:-moz-read-only才能生效 - 如果项目要兼容旧版 Firefox 或 IE，优先用
[readonly]；如果只跑现代浏览器且需要 JS 动态响应，再考虑:read-only
只读样式怎么写才不和 :disabled 搞混？
用户一眼分不清“只是看”和“彻底锁死”，是表单体验最常翻车的地方。
-
:read-only元素仍可聚焦、可双击选中、可复制文本、会随表单提交 —— 所以背景别太灰（比如用background-color: #f9fafb），文字别降权（保持color: #111827） - 加
cursor: default比cursor: not-allowed更准确：前者表示“这是内容，点不动”，后者暗示“出错了/被禁用了” - 千万别让一个元素同时带
readonly和disabled——:disabled样式优先级更高，且语义冲突：一个提交数据，一个不提交
哪些地方容易被忽略？
真正卡住人的不是语法，是边界行为和隐含假设。
立即学习“前端免费学习笔记（深入）”；
-
:read-only不拦截任何事件：用户照常能右键粘贴、Ctrl+A 全选、按 Tab 键停在上面 —— 要禁粘贴得自己监听paste并preventDefault() -
<input type="number">在 Safari 15.4 之前有 bug，:read-only可能不触发，得 fallback 到[readonly] - Vue/React 里用
:readonly或readOnly绑定，务必检查最终渲染的 DOM 是否真有readonly属性，而不是只改了 JS 属性
