当使用纯数字作为 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 或 #2024year 都需转义），直接跳过整条规则，因此 flex-shrink 不生效。
立即学习“前端免费学习笔记（深入）”；
-
✅ 正确写法（转义数字）：
#\37 { flex-shrink: 4; }这里 \37 是 Unicode 码点 U+0037（即字符 '7'）的十六进制转义形式，末尾需加空格（或紧跟非十六进制字符）以终止转义。实际开发中常写作 #\37（注意空格），但多数现代浏览器也接受 #\37（无空格）并自动识别。
✅ 更佳实践：避免数字开头的 ID，改用语义化类名
<div class="container-1"> <div>1</div> <div>2</div> <!-- ... --> <div class="item-7">7</div> </div>
.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 工程最佳实践。
