:read-only 仅匹配具有 readonly 布尔属性（无论值为何）的 和 ，不作用于 、 或 contenteditable 元素；它反映真实只读状态，不拦截粘贴，且与 :disabled 行为不同。
怎么用 :read-only 选中真正只读的表单元素
它只匹配 readonly 属性存在且值为真（不关心具体值）的 <input>、<textarea></textarea>，不匹配 disabled 或仅靠 JS 阻止输入的元素。浏览器按 HTML 规范判定，不是看有没有响应用户输入。
-
readonly是布尔属性，写readonly或readonly="readonly"效果一样；但readonly="false"依然算只读——HTML 里布尔属性只要出现就生效 -
<select></select>和<button></button>不支持:read-only，哪怕加了readonly属性也没用，会被忽略 -
contenteditable="true"的<div> 不受 <code>:read-only影响，这个伪类只作用于表单控件:read-only和:disabled容易混淆的边界两者样式可共存，但语义和行为完全不同：
:disabled元素不提交、不可聚焦、键盘事件完全被拦截；:read-only元素仍可聚焦、可复制、会随表单提交，只是不能编辑。- 如果给一个
<input readonly disabled>写样式，:read-only和:disabled都会命中，但:disabled优先级更高（同权重时后声明的胜出） - 用 JS 动态移除
readonly属性后，:read-only立即失效；但用element.readOnly = false操作 DOM 属性，同样会触发样式重绘 - 不要指望
:read-only拦截粘贴——用户仍可右键粘贴，需额外监听paste事件并preventDefault()
兼容性与实际能用的场景
Chrome 15+、Firefox 19+、Safari 3.1+、Edge 12+ 都支持，IE 完全不支持。如果你的项目还要兼容 IE，就得用 class 模拟，比如
.is-readonly。- 适合做视觉反馈：灰掉背景、加锁图标、禁用光标
cursor: not-allowed，但别只靠它防用户改数据 - 常用于表单预览页，比如订单确认环节把收货地址设为
readonly，再用:read-only统一加底纹 - 注意 Safari 对
textarea[readonly]的:read-only样式有时延迟生效，建议加transform: translateZ(0)强制硬件加速触发重绘
为什么有时候写了
:read-only却没效果最常见原因是元素没真正带上
readonly属性，或者用了错误的写法。立即学习“前端免费学习笔记（深入）”；
- 写成
<input readonly>—— 这个依然只读，因为readonly是布尔属性，值是什么不重要 - 写成
<input readonly>—— 同样无效，只要属性存在就只读 - JS 里用
el.setAttribute('readonly', 'false')，结果还是只读；正确做法是el.removeAttribute('readonly') - CSS 选择器权重太低，被其他规则覆盖，比如
input[type="text"]比:read-only权重高，得写成input:read-only或input[readonly]:read-only
真正只读的状态必须来自 HTML 属性或 DOM
readOnly属性，CSS 伪类不会“创造”只读状态，它只是反映它。 - 如果给一个
