为什么 CSS 中以数字开头的 ID 选择器（如 #7）无法生效？

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 实现，例如：

   
1
      
7
 

.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。