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 进行样式控制：
- ID 应主要用于 JavaScript 锚点或语义化标记（如 id="section-contact"）；
- 样式应统一通过 class 实现，例如：
<div class="container-1"> <div>1</div> <!-- ... --> <div class="item item-7">7</div> </div>
.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 使用以明确行为。
总结：不是 flex-shrink 失效，而是 #7 这个选择器根本没被解析——根源在于 CSS 标识符语法限制。转义 #\37 可修复，但最佳解法是改用语义化 class。
