CSS伪类选择器:not(:disabled,:read-only)对div hover不生效原因咨询

核心原因是浏览器对:read-only伪类的匹配规则存在差异：

• 对于input这类表单控件，只有显式设置readonly属性时，才会被:read-only伪类匹配；
• 像div这类非表单元素，默认会被浏览器判定为:read-only状态——因为它们本身不支持用户编辑（除非给元素添加contenteditable="true"属性）。

你的CSS选择器.input:not(:disabled, :read-only):hover中，div元素会被:read-only命中，因此被:not()排除在外，hover时自然不会触发蓝色文字样式。而当你移除:read-only伪类后，选择器变为.input:not(:disabled):hover，div不匹配:disabled（非表单元素不支持disabled属性），所以hover样式就能正常生效了。

如果想验证这个逻辑，你可以给div添加contenteditable="true"属性，此时div不再被:read-only匹配，原选择器的hover效果就会对div生效。

内容的提问来源于stack exchange，提问作者korteee