:read-only 仅匹配原生支持 readonly 属性的文本类表单控件，即 type 不为 range、checkbox 等的 和
哪些元素能被 :read-only 匹配到
:read-only 只对原生支持 readonly 属性的表单控件生效，目前仅限 <input>（type 不为 range、checkbox 等非文本类）和 <textarea></textarea>。其他元素加了 readonly 属性也无效：
-
<select></select>、<button></button>、<output></output>：即使手动写readonly，浏览器直接忽略，:read-only不会命中 -
contenteditable="true"的<div> 或 <code><p></p>：不属于表单控件，:read-only完全不作用 -
input[type="hidden"]：没有交互界面，也不在匹配范围内 -
input[readonly]是属性存在即匹配，不管该属性是否被 JS 动态移除或设为readonly="false"（HTML 布尔属性只要出现就生效） -
input:read-only匹配的是“当前真实只读状态”，由浏览器根据 DOM 属性值 + 元素类型综合判定；JS 执行el.readOnly = false后，样式立即失效 - 若同时写了
input[readonly] { … }和input:read-only { … }，后者优先级更高（伪类 > 属性选择器），但没必要共存 - 单写
input:read-only会导致 Firefox 下样式丢失，必须显式补上input:-moz-read-only - 不要依赖
:read-only做功能控制——它只是样式钩子；禁用输入仍需靠 HTMLreadonly属性或 JS 监听 - 如果项目需兼容 IE 或旧版 Firefox，更稳妥的方式是统一用
input[readonly]，它在所有浏览器中都可靠 - 用户仍可双击选中文本、右键粘贴、按
Ctrl+A全选——:read-only不拦截任何事件 - 元素依然可获得焦点（
tabindex有效），且表单提交时它的值照常发送 - 若要禁用粘贴，得额外监听
paste事件并调用event.preventDefault()；若要禁用聚焦，得加tabindex="-1"并阻止focus - 和
:disabled混用时注意：两者可同时命中（如<input readonly disabled>），但:disabled样式会覆盖:read-only（同权重下后声明者胜出）
:read-only 和 [readonly] 属性选择器的区别
两者视觉效果常一致，但底层机制不同，容易误用：
浏览器兼容性与降级方案
:read-only 在 Chrome、Safari、Edge（Chromium 内核）和 Opera 中原生支持；Firefox 需用 :-moz-read-only，IE 完全不支持：
常见误操作：以为 :read-only 能阻止粘贴或聚焦
它只负责样式，不改变行为：
:read-only 最适合做「视觉反馈增强」，而不是逻辑控制点。真正容易被忽略的是：它不解决交互限制，只解决「让用户一眼看出这东西不能改」——这个边界一旦混淆，后续就得靠 JS 补一堆 preventDefault 和 tabindex 逻辑来填坑。
