:read-only仅匹配（非hidden/checkbox等）和；、、、、及contenteditable="false"元素均不匹配，即使显式添加readonly属性也无效。

:read-only 只对 <input>（非 hidden、checkbox 等类型）和 <textarea></textarea> 生效，其他元素写了也白搭。

哪些元素根本不会匹配 :read-only？

浏览器硬性限制，不是写法问题：

• <select readonly></select>、<button readonly></button>、<div readonly> —— 全都不触发 <code>:read-only，哪怕 DOM 里真有这个属性
• <input type="hidden"> 和 <input type="checkbox"> 等不支持 readonly 属性的控件，加了也无效
• contenteditable="false" 的 <div> 或 <code><span></span> 不走 :read-only，得用 [contenteditable="false"] 单独写

  为什么明明加了 readonly 属性，样式还是没变？

  伪类生效的前提是：浏览器真“认出”这个元素只读。常见断点在这里：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • JS 设置 el.readOnly = true 不够 —— 必须调用 el.setAttribute('readonly', '')，让属性真实写入 DOM
  • Vue/React 中用了 :readonly 或 readOnly，但没检查最终渲染出的 HTML 是否真带 readonly 字样（DevTools → Elements 面板里搜）
  • readonly="false" 或 readonly="0" 这种写法反而会生效（因为布尔属性“存在即为真”），但容易误导人；正确写法是 readonly 或 readonly=""
  • Safari ≤15.3 对 type="number" 的 :read-only 支持不全，老版本直接忽略

  为什么 :read-only 和 :disabled 同时存在时样式不对？

  这不是 bug，是浏览器语义优先级设计：

  • 如果一个 <input> 同时有 readonly 和 disabled 属性，:disabled 规则一定覆盖 :read-only —— 因为 disabled 是更强的禁用状态
  • 但二者行为完全不同：:read-only 元素仍可聚焦、可复制、会提交值；:disabled 则完全跳过表单验证、不提交、不可聚焦
  • 别为了“视觉灰掉”而滥用 disabled，该用 readonly 就用，样式上用 background-color + color + cursor: not-allowed 明确传达“只读”而非“禁用”

  最常被忽略的一点：:read-only 不影响表单验证逻辑，也不阻止 oninput 或 onchange 被 JS 手动触发 —— 它只是个样式钩子，不是功能锁。真要防改，还得靠后端校验和前端逻辑控制。