当 css id 选择器以纯数字（如 `id="7"`）开头时，浏览器会将其视为非法标识符，导致样式规则被忽略；正确写法需使用 unicode 转义语法（如 `#\37`），或更推荐使用语义化类名替代。
在 CSS 规范中，ID 和类选择器的名称必须符合「标识符（identifier）」语法规则：首字符必须是字母（a–z, A–Z）、下划线（_）或短横线（-），后续字符可为字母、数字、下划线或短横线。因此，#7 是一个无效的 CSS 标识符——尽管 HTML 允许 id="7"（HTML 对 ID 值约束更宽松），但 CSS 解析器在遇到 #7 时会直接丢弃该规则，导致 flex-shrink: 4 完全不生效。
✅ 正确写法（转义数字 ID）：
#\37 { /* \37 是 Unicode 码点 U+0037（即字符 '7'）的转义形式 */
flex-shrink: 4;
}注意：\37 后需跟一个空格（或终止符），否则浏览器可能误读后续字符。也可写作 #\37（末尾带空格）或 #\37{（紧邻花括号），以确保解析准确。
⚠️ 为什么内联样式“看起来”有效？
内联样式（如 <div id="7" style="flex-shrink: 4;">）绕过了 CSS 选择器解析阶段，直接将声明注入元素的 style 属性，因此不受 ID 命名合法性限制——但这只是表象，并非真正解决了选择器问题。
? 更佳实践：避免数字开头的 ID，改用语义化类名
立即学习“前端免费学习笔记（深入）”；
<div class="container-1"> <div>1</div> <div>2</div> <!-- ... --> <div class="item item-7">7</div> </div>
.item-7 {
flex-shrink: 4;
}这样既符合标准、提升可维护性，又规避了转义复杂性和潜在兼容性风险。
? 补充说明：
- flex-shrink 仅在父容器为 display: flex 且存在空间不足（内容总宽度 > 容器宽度）时才起作用；本例中若 .container-1 未设固定宽度或未触发收缩条件，即使选择器正确，也可能观察不到效果。
- 可通过开发者工具的「Computed」面板验证样式是否被应用：若 flex-shrink 显示为 0 或未列出，大概率是选择器失效所致。
总之，优先使用语义化类名，慎用纯数字 ID；若必须使用，务必按 CSS 标准转义——这是保障样式可靠性的基础。
