CSS类名以数字开头（如.1col）会静默失效，因规范要求标识符必须以字母、下划线或短横线开头；浏览器直接忽略整条规则，不报错也不显示在DevTools中。
为什么 .1col 这类类名会静默失效
CSS 类选择器以数字开头（如 .1col）不是“报错”，而是被浏览器直接忽略——它根本不会进入 CSS 解析流程，也不会出现在 DevTools 的 Styles 面板里。这不是 bug，是 CSS 规范明确定义的行为：类选择器中的标识符（identifier）必须以字母、下划线 _ 或短横线 - 开头，不能以数字开头。
常见错误现象包括：
-
document.querySelector('.1col')返回null，哪怕 HTML 里真写了class="1col" - CSS 文件中写了
.1col { color: red; }，但元素颜色毫无变化，且 Styles 面板里压根不显示这条规则 - 使用
stylelint时触发selector-no-invalid报告，提示“invalid selector”
.1col 和 [class="1col"] 的区别
属性选择器 [class="1col"] 能工作，并不意味着 .1col 合法。前者是把 class 当作普通 HTML 属性来匹配，值可以是任意字符串（包括以数字开头）；后者是 CSS 类选择器语法，受标识符语法规则严格约束。
所以：
立即学习“前端免费学习笔记（深入）”；
-
.1col❌ 非法类选择器，解析失败，静默丢弃 -
[class="1col"]✅ 合法属性选择器，能匹配，但语义模糊、性能略低、无法响应classList.add()动态变更 -
.col1✅ 推荐写法：字母开头，符合规范，支持所有场景
为什么浏览器不报错而是静默跳过
CSS 解析器设计原则是“容错但不妥协”：遇到非法选择器，整条规则会被整个丢弃（包括后面的所有声明），但不会中断后续规则解析。这是为了兼容历史不规范写法，避免一个错误让整张样式表瘫痪。
这意味着：
- 漏掉右大括号
}可能让其后所有规则失效，却无任何提示 -
.1col { color: red; }失效，但.2col { color: blue; }同样失效——它们都违反同一条语法规则 - DevTools 中看不到规则 ≠ 写错了选择器，更可能是它压根没被解析进来
PyScript / Selenium / querySelector 全军覆没的共同原因
这些工具底层都依赖 document.querySelector() 或等价的 CSS 选择器引擎，而该 API 严格遵循 CSS 规范。所以当你在 PyScript 中写 target="3dplot"，或在 Selenium 中调用 find_element_by_css_selector('#3dplot')，只要 ID 以数字开头，就会触发 SyntaxError 或 InvalidSelectorException。
修复方式统一且简单：
- 把
id="1nav"改成id="nav1"或id="main-nav" - 把
class="2col-layout"改成class="layout-2col"或class="two-col" - 避免任何形式的数字开头命名，哪怕加了短横线（
-1col也不行，因为-后紧跟数字仍不构成合法标识符）
最易被忽略的一点：HTML 中看似“渲染成功”的元素，不代表它的 ID 或 class 能被 JS/CSS 正确识别——命名合规性是 DOM 操作和样式应用的前提，不是可选项。
