CSS 中 ID 选择器以数字开头时需转义，否则样式不生效

当使用纯数字作为 html 元素的 `id`（如 `id="7"`）并在 css 中直接写 `#7` 时，该选择器会被浏览器解析为无效语法，导致样式（如 `flex-shrink`）无法应用；正确写法是使用 css 转义序列 `#\37`，或更推荐地改用语义化类名。

在 CSS 规范中，ID 选择器以数字开头是语法非法的。虽然 HTML 允许 id="7" 这样的属性值（HTML5 对 id 的命名限制已放宽），但 CSS 选择器语法要求：以数字开头的标识符必须通过反斜杠转义（escape sequence）才能被正确识别。

例如：

• ❌ 错误写法（浏览器忽略）：

  #7 { flex-shrink: 4; }

  此时浏览器会将 #7 解析为一个不合法的选择器（类似 #1a 或 #2025year 都需转义），直接跳过整条规则，因此 flex-shrink 不生效。

• ✅ 正确写法（转义数字）：

  #\37 { flex-shrink: 4; }

  这里 \37 是 Unicode 码点 U+00

  

  37（即字符 '7'）的十六进制转义形式，末尾需加空格（或紧跟非十六进制字符）以终止转义。实际开发中常写作 #\37（注意空格），但多数现代浏览器也接受 #\37（无空格）并自动识别。

✅ 更佳实践：避免数字开头的 ID，改用语义化类名

  1
  2
  
  7

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

⚠️ 注意事项：

• flex-shrink 生效的前提是父容器为 display: flex（你已满足）且子项存在空间不足场景（如容器宽度小于所有子项总宽度）；
• 单独设置 flex-shrink 不影响 flex-grow 或 flex-basis，建议配合使用完整 flex 简写（如 flex: 0 4 auto）提升可维护性；
• ID 选择器优先级虽高，但可读性与可维护性差，尤其在组件化/框架开发中，应优先使用 class。

总结：不是 flex-shrink 失效，而是 #7 本身未被 CSS 引擎识别——这是 CSS 选择器语法层面的限制，而非 Flexbox 行为异常。养成用 class 替代数字 ID 的习惯，既规避转义复杂度，又符合现代 CSS 工程最佳实践。