当使用纯数字（如 `7`）作为 html 元素的 `id` 值并在 css 中通过 `#7` 选择时，浏览器会因 css 语法规范将其视为非法标识符而忽略该规则；必须采用 unicode 转义形式 `#\37` 才能正确匹配。
在 CSS 规范中，标识符（identifier）（如类名、ID 选择器中的名称）必须以字母（a–z 或 A–Z）、下划线 _ 或短横线 - 开头，不能以数字开头。因此，虽然 HTML 允许
这样的写法（HTML 对 id 值的约束更宽松），但 CSS 解析器在遇到 #7 时会直接拒绝解析该选择器——它不被视为合法的 ID 选择器，整条 CSS 规则（包括 flex-shrink: 4）将被静默丢弃，导致样式失效。
✅ 正确的转义写法是：
#\37 {
flex-shrink: 4;
}这里 \37 是 Unicode 码点 U+0037（即字符 '7'）的 CSS 转义形式，末尾的空格可选但推荐保留（CSS 要求转义后若紧跟字母/数字需加空格以避免歧义）。你也可以写作 #\37（带空格）或更明确的 #\000037，但 #\37 是最简洁且广泛兼容的形式。
? 验证方式：
在浏览器开发者工具中检查该元素的 computed styles，若 #7 {...} 未出现在 Styles 面板中，基本可确认是选择器解析失败；而改用 #\37 后，规则将正常显示并生效。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- flex-shrink 生效的前提是父容器为 Flex 容器（即设置了 display: flex 或 display: inline-flex）。你的 .container-1 缺少该声明，需补充：
.container-1 { display: flex; /* 必须添加 */ flex-wrap: nowrap; /* 可选，默认值 */ } - 即使 flex-shrink 被正确应用，其效果也取决于容器剩余空间与子项 flex-basis（默认为 auto）的关系。若其他子项未设宽度或内容撑开，可能无足够收缩空间，建议配合 flex-basis 或 width 测试。
? 更佳实践：
避免使用纯数字或数字开头的 ID/class 进行样式控制。推荐改用语义化类名，例如：
<div class="container-1"> <!-- ... --> <div class="item item--seven">7</div> </div>
.item--seven {
flex-shrink: 4;
}这样既规避转义复杂性，又提升可维护性与团队协作友好度。
总结：#7 失效的根本原因是 CSS 语法限制，而非 Flex 布局机制问题；掌握 ID 转义规则（#\37）可临时修复，但长期应遵循命名规范，优先使用语义化 class。
