textarea:read-only没生效是因为DOM中缺少readonly属性；必须用setAttribute('readonly', '')或HTML直接写< textarea readonly >，仅JS赋值readOnly=true无效，且仅原生textarea支持该伪类。
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
哪些 textarea 能匹配 :read-only？别试错方向
:read-only 只对原生支持 readonly 的 <textarea> 生效，且不关心内容是否真被锁住——只看属性是否存在、元素类型是否合规。
-
<textarea readonly>✅ 完全匹配 -
<textarea readonly="false">✅ 依然匹配（HTML 布尔属性，有即生效） -
<textarea disabled readonly>❌ 不匹配:read-only，只走:disabled -
<div contenteditable="false">❌ 不是<textarea>，伪类无效 -
<textarea readonly>在 Shadow DOM 内部 ❌ 默认不穿透，需用::slotted(textarea:read-only)
常见样式需求怎么写？别漏掉关键行为控制
textarea:read-only 只管样式，不改交互。用户仍可聚焦、选中、复制、右键粘贴——这些都得额外处理。
- 禁用文本选择：
user-select: none；想允许复制则用user-select: text - 光标提示只读：
cursor: not-allowed或cursor: default（后者更友好，保留可点击感） - 阻止粘贴：
textarea:read-only { ... } + 监听 <code>paste事件并event.preventDefault() - 跳过 Tab 焦点：
tabindex="-1"（否则键盘用户会停在这里） - 背景/边框示例：
textarea:read-only { background: #f9f9f9; border-color: #ddd; color: #666; }
兼容性差怎么办？别硬扛 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]，所有浏览器都支持，行为确定 - Firefox 兜底写法：
textarea:read-only, textarea:-moz-read-only - 不要依赖它做功能开关——它只是视觉钩子；禁用输入逻辑必须靠 HTML
readonly属性或 JS 监听 - SSR 场景下，务必确保初始 HTML 字符串里就含
readonly属性，否则首屏样式丢失
