应使用带语义前缀的类名（如num123abc）并配合[class^="num123"]选择器，因为CSS属性选择器匹配整个class字符串而非单个类，直接[class^="123"]在多类场景下会失效。
想选中以特定数字开头的类名，比如 class="123abc"、class="45xyz"，直接用 [class^="数字"] 是不行的——因为 HTML 中类名（class 属性）通常是多个类用空格分隔的，例如 class="123abc active btn"。此时 [class^="123"] 会失败，因为它要求整个 class 属性值**以“123”开头**，而实际开头是 "123abc active btn"，虽然含“123abc”，但不满足“以123开头”的字符串匹配。
✅ 正确思路：匹配包含指定前缀的独立类名
CSS 本身没有原生“匹配空格分隔的单词前缀”的选择器，但有几种实用方案：
-
用属性选择器组合模拟：借助
[class*="123"]（包含）+ 排除干扰（如加空格或边界判断），但不够精确； -
更可靠的是添加统一命名空间：约定所有目标类名都以相同前缀开头且语义清晰，例如
data-num="123"或class="num-123abc"，然后用[class^="num-"]或[data-num]精准选中； -
如果必须基于纯数字开头类名，推荐在 HTML 中避免让数字直接打头（HTML 规范虽允许，但易引发解析/维护问题），改用
class="n123abc"或class="num123abc"，再用[class^="n123"]或[class^="num123"]安全匹配。
? 实际可运行的例子
假设你控制 HTML 输出，可以这样写：
ABC
CSS 写成：
立即学习“前端免费学习笔记（深入）”；
[class^="num123"], [class^="num456"] {
color: red;
}就能分别精准命中前两个元素。
⚠️ 注意：不要依赖 [class^="1"] 这类写法
即使某个元素写成 class="123abc"，以下 CSS 大概率不生效：
[class^="123"] { /* ❌ 不推荐 */ }原因：一旦这个元素还有其他类，比如 class="123abc active"，属性值就变成 "123abc active"，它并不以 "123" 开头（开头是 "123abc"），但字符串匹配是逐字节的，不会按单词切分。
基本上就这些。核心是：CSS 属性选择器操作的是整个属性值字符串，不是按 class 单词拆分的。想真正“选中以某数字开头的类”，最稳的方式是规范命名 + 使用带前缀的类名，再用 [class^="prefix"] 匹配。
