html - CSS :read-only 应用于非只读元素

Question

有人可以向我解释为什么将 css 伪类:read-only应用于非只读元素吗？

见https://codepen.io/xsrf/pen/RwgZepb

我在最近的 Edge、Chrome 和 Firefox 中对此进行了测试。全部适用input:read-only于<input type="button" />

https://www.w3schools.com/cssref/sel_read-only.asp说

:read-only 选择器选择“只读”的元素。具有“只读”属性的表单元素被定义为“只读”。

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly说：

当输入具有 readonly 属性时， :read-only 伪类也适用于它。相反，支持 readonly 属性但没有属性集的输入匹配 :read-write 伪类。

标签： htmlcss

Answer 1

这是规范所说的：

一个元素匹配:read-write，如果它是用户可更改的，由文档语言定义。否则，它是:read-only。

按钮不是用户可更改的，因此:read-only.