为什么 CSS 中以数字开头的 ID 选择器（如 #7）无法生效？

2026-01-16 00:00:00 作者：霞舞

css 中 id 选择器若以纯数字开头（如 `#7`），必须进行 unicode 转义才能被正确解析；否则浏览器会忽略该规则，导致样式（如 `flex-shrink`）失效。

在你的代码中：

#7 {
  flex-shrink: 4;
}

这段 CSS 实际上不会被浏览器识别——因为根据 CSS Syntax Level 3 规范，一个合法的 CSS 标识符（identifier）不能以纯数字开头。#7 被解析为无效的选择器，整条规则被丢弃，因此 flex-shrink: 4 完全不生效。

✅ 正确写法是使用 Unicode 转义序列：
数字 7 的 Unicode 码点是 U+0037，转义格式为 \37（注意末尾需加空格或分号终止转义），所以应写作：

#\37 {
  flex-shrink: 4;
}

? 验证技巧：你可以在浏览器开发者工具中检查该元素的 Styles 面板——如果 #7 规则显示为灰色、带删除线或根本未列出，就说明它被当作无效 CSS 忽略了；而 #\37 则会正常显示并生效。

? 更推荐的实践是避免使用纯数字 ID 进行样式控制：

  1
  
  7

.item-7 {
  flex-shrink: 4;
}

这样既规避了转义复杂性，又提升了可维护性与可读性。

⚠️ 补充说明：

flex-shrink 生效的前提是父容器为 display: flex（你的 .container-1 > div 并非容器，而是子项；真正起作用的是 .container-1
本身需设为 display: flex ——但此问题与 ID 解析无关，属于布局逻辑，此处不展开）；
即使 #7 写对了，若父容器未设置 display: flex 或子项未设 flex 相关属性（如 flex-basis），flex-shrink 也可能无视觉表现，建议配合 flex: 0 4 auto 使用以明确行为。