::spelling-error 不是可靠可用的 CSS 伪元素，当前主流浏览器基本不支持，它未被 W3C 推荐，仅存于早期草案，实际无法生效，生产环境应使用 :invalid 或 :user-invalid 配合表单验证实现输入错误提示。
::spelling-error 不是可靠可用的 CSS 伪元素，当前（2026年）主流浏览器基本不支持它。
浏览器根本不识别 ::spelling-error
尽管部分文档提到 ::spelling-error，但实际测试中 Chrome、Firefox、Safari 均未实现该伪元素的匹配逻辑。即使你写了样式：
span::spelling-error { color: red; }
也不会生效——DOM 中没有任何元素被选中，开发者工具里也看不到该伪元素被应用。
- 它不是 W3C 推荐标准，仅出现在早期草案或个别浏览器实验性实现中
- Edge 和 Safari 完全忽略该选择器；Chrome 自 2021 年起已移除相关支持代码
- 没有
getComputedStyle()可读取、无法用 JS 检测是否命中
::spelling-error 和 ::grammar-error 都不能用于生产环境
这两个伪元素常被误传为“拼写/语法高亮方案”，但现实是：
-
::grammar-error同样无实质支持，连 Blink/WebKit 的源码中都找不到对应解析分支 - 浏览器拼写检查（如右键“更正拼写”）是 UI 层功能，不暴露给 CSS 渲染树
- 即使系统启用了拼写检查，
contenteditable或textarea中的错误词也不会触发::spelling-error
真正能控制拼写反馈的只有 input 元素的 :invalid 状态
如果你的目标是让用户感知输入错误，唯一稳定路径是利用表单校验机制：
- 给
加约束，用:invalid样式提示 - 对自定义规则，必须用 JS 调用
setCustomValidity()，再靠:invalid触发样式 -
:user-invalid是更优替代（Chrome 102+、Firefox 119+、Safari 16.4+），避免空值误报
例如：
input:user-invalid { border-color: #e53e3e; }<br>input:user-invalid::placeholder { color: #e53e3e; }
拼写错误本身不属于 HTML 表单验证范畴，也没有标准化的 CSS 接口。想高亮错词，只能走 JS 方案：分词 → 调用 Web API（如 SpellCheck 实验性接口，目前仅 Chromium 内部可用）→ 插入 或添加 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
