匹配以数字开头的类名必须用属性选择器[class~="123abc"]，因css禁止.123abc这类选择器；它按空格分隔单词全等匹配，语义等价于类选择器且跨浏览器兼容。
类名以数字开头在HTML中是合法的，但CSS选择器不支持直接写 .123abc
HTML5 允许 class 属性值以数字开头（例如 <div class="123abc">），但CSS规范明确禁止选择器以数字开头。浏览器解析 <code>.123abc 时会直接报错或静默忽略——这不是兼容性问题，而是语法错误。
常见错误现象：Uncaught SyntaxError: Invalid or unexpected token（出现在内联样式或动态插入style时），或样式完全不生效且控制台无提示。
- CSS选择器要求标识符（如类名、ID名）必须以字母、下划线
_或连字符-开头 - 数字开头的类名在CSS中无法被
.直接引用，哪怕加引号（.".123abc"）也无效 - 部分构建工具（如PostCSS、Vite插件）会在编译阶段就报错，阻止非法选择器生成
正确做法：用属性选择器匹配 class 属性值
绕过类选择器语法限制，改用属性选择器 [class] 精确匹配属性值。这是唯一稳定、跨浏览器、无需改HTML的方案。
- 匹配完整类名（仅含该类）：
[class="123abc"] - 匹配类名出现在空格分隔列表中（推荐，兼容多类场景）：
[class~="123abc"] - 若必须模糊匹配（如类名是子串），可用
[class*="123abc"]，但有误匹配风险
示例：
/* HTML: <button class="123abc primary">Submit</button> */
[class~="123abc"] {
background: #007bff;
}
注意：[class~="..."] 中的波浪号表示“空格分隔的单词之一”，语义等价于类选择器逻辑，但规避了语法限制。
为什么不建议改HTML？以及改了也未必解决问题
表面上看，把 class="123abc" 改成 class="x123abc" 就能用 .x123abc，但实际常不可行。
- 第三方库或框架生成的DOM（如某些UI组件、图表库）可能硬编码数字开头类名，你无法修改
- 服务端渲染模板或遗留系统中，类名由变量拼接生成，改动成本高且易引发连锁问题
- 即使你手动加前缀，若该元素还同时带其他类（如
class="123abc active"），改完后仍需同步更新所有引用点
属性选择器方案不侵入HTML结构，也不依赖JS补丁，是更干净的解法。
性能和可维护性提醒
[class~="123abc"] 的性能与 .123abc 几乎无差别——现代浏览器对属性选择器做了深度优化，尤其当属性值较短、匹配模式固定时。
- 避免滥用
[class*="123"]这类通配匹配，它会触发全量扫描，影响重排重绘性能 - 如果项目中大量存在数字开头类名，建议在构建阶段用PostCSS插件统一重写（如
postcss-class-prefix），而非 runtime JS 处理 - 团队协作时，在CSS注释里写明为什么用属性选择器，比如：
/* fallback for legacy class="123icon" */
真正容易被忽略的是：很多人试过 .\31 23abc（CSS转义写法），但它只对ID选择器有效，类选择器不支持数字转义——这点连不少资深前端都踩过坑。
