textarea:read-only没生效是因为DOM中缺失readonly属性；必须用setAttribute('readonly', '')或HTML直接写readonly，而非JS赋值el.readOnly = true，且仅textarea和部分input类型支持该伪类。
textarea:read-only 为什么没生效？先看 DOM 里有没有 readonly 属性
浏览器只认 HTML 中真实存在的 readonly 属性，不是 JS 设置的 el.readOnly = true。哪怕你用 JS 把属性设为 true，若没写进 DOM，textarea:read-only 就不会触发。
- ✅ 正确做法：
el.setAttribute('readonly', '')或直接在 HTML 里写<textarea readonly></textarea> - ❌ 错误写法：
el.readOnly = true（DOM 里没出现readonly字样） - ⚠️ Vue/React 中用
v-bind:readonly或readOnly={true}通常能渲染出属性，但得打开 DevTools → Elements 面板确认最终 HTML 确实带readonly
哪些元素能匹配 :read-only？别试错方向
:read-only 只对原生支持 readonly 的 <input>（type 不为 range、checkbox、radio、hidden）和 <textarea></textarea> 生效，且不关心内容是否真被锁住——只看属性是否存在、元素类型是否合规。
-
<textarea readonly></textarea>✅ 完全匹配 -
<textarea readonly></textarea>✅ 依然匹配（HTML 布尔属性，有即生效） -
<textarea disabled readonly></textarea>❌ 不匹配:read-only，只走:disabled <div contenteditable="false"> ❌ 不是表单控件，伪类无效 <li> <code><select readonly></select>❌ HTML 规范不支持，浏览器忽略- 禁用文本选择：
user-select: none；若允许复制则用user-select: text - 光标提示只读：
cursor: default（比not-allowed更友好，保留可点击感） - 阻止粘贴：监听
paste事件并调用event.preventDefault() - 跳过 Tab 焦点：
tabindex="-1"（否则键盘用户会停在这里） - 背景/边框示例：
background: #f9f9f9; border-color: #ddd; color: #666; - 降级首选：
textarea[readonly]，所有浏览器都支持，行为确定 - Firefox 必须显式补上：
input:-moz-read-only，否则样式丢失 - Shadow DOM 内部默认不穿透，需用
::slotted(textarea:read-only)
:read-only 只管样式，不改交互——这些行为得手动补
:read-only 是纯视觉钩子，用户仍可聚焦、选中、复制、右键粘贴。想实现“查看模式”体验，必须额外加控制：
兼容性差怎么办？别硬扛 IE 和旧 Safari
:read-only 在 Chrome、Edge（Chromium）、现代 Safari（≥15.4 / macOS 12.3）和 Firefox（需 :-moz-read-only）中可用，但 IE 全系不支持，Safari ≤15.3 对 input[type="number"] 还有漏匹配 bug——<textarea></textarea> 相对稳，但保险起见仍建议降级。
立即学习“前端免费学习笔记（深入）”；
readonly 标识，前端又没同步写入 DOM 属性——这时 :read-only 完全无感知，得靠 class 或数据驱动逻辑兜底。
