::spelling-error伪元素目前在主流浏览器中完全不支持，chrome、firefox、safari、edge均未实现，即使书写有效css也无任何视觉效果；替代方案应使用:invalid伪类结合javascript主动标记并样式化拼写错误。
::spelling-error 伪元素目前在主流浏览器中基本不可用，不建议在生产环境使用。 它虽写入了 CSS 规范草案，但截至 2026 年 6 月，Chrome、Firefox、Safari、Edge 均未实现该伪元素的渲染支持 —— 即使你写了 ::spelling-error { color: red; }，也不会有任何视觉变化。
为什么 ::spelling-error 看起来“没反应”
这不是你代码写错了，而是浏览器根本没解析这个选择器：
- MDN 明确标注其兼容性为「No support」（无支持），且无计划时间表；
- 所有现代浏览器的 DevTools 的「Computed」面板里都查不到
::spelling-error相关样式； - 即使开启拼写检查（如 Chrome 中右键启用“拼写检查”），浏览器也只高亮下划线（由底层平台提供，非 CSS 渲染），且不触发该伪元素；
-
::grammar-error同样处于未实现状态，不要混用或寄望于二者协同工作。
替代方案：用 :invalid + JavaScript 模拟纠错反馈
真正可控、可样式化、有兼容性的做法是放弃依赖浏览器拼写引擎，改用表单验证逻辑主动标记错误：
- 对
<input type="text">或<textarea></textarea>绑定input或blur事件； - 用简单规则（如关键词黑名单、正则匹配）或调用 Web API（如
Spellcheck API，目前仅 Firefox 实验性支持且需权限）判断是否疑似错误； - 手动添加类名如
is-spelling-error，再用 CSS 控制样式：.is-spelling-error { border-color: #e53e3e; background-color: #fff5f5; }； - 配合
:invalid伪类处理原生校验失败（如required、pattern不通过），它才是稳定可用的标准机制。
哪些 CSS 属性理论上允许用于 ::spelling-error（但无实际意义）
规范曾定义过可作用于 ::spelling-error 的属性子集，包括 color、background-color、text-decoration、text-shadow、outline 等 —— 但这些只是纸面限制。由于选择器本身不被识别，写任何属性都无效。不要花时间调试 text-emphasis-color 是否生效，它连解析都不会进入。
真正需要拼写纠错 UI 的项目，应把控制权收回到 JS 层：监听输入、调用词典服务或规则引擎、动态插入 <mark></mark> 或伪元素模拟高亮 —— 浏览器原生的 ::spelling-error 目前只是一个空壳，连占位符都算不上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
