为何CSS flex-shrink外部样式不生效，内联样式却正常工作？

• 核心问题：CSS选择器语法限制
  CSS规范明确规定，ID选择器的标识符（#后面的内容）不能以数字开头，直接写#7属于非法语法，浏览器会直接忽略这条无效的选择器规则，导致外部CSS里的flex-shrink:5根本没匹配到目标元素。

• 内联样式生效的原因
  内联样式是直接写在元素的style属性里的，不需要通过选择器去匹配元素，只要元素本身存在，style属性里的样式就会直接作用于该元素，自然不会受选择器语法的限制。

• 如果要在外部CSS中匹配ID为7的元素，正确写法有两种

  1. 使用转义字符：#\37 { flex-shrink: 5; }（\37是数字7的ASCII码转义写法）
  2. 使用属性选择器：[id="7"] { flex-shrink: 5; }

内容的提问来源于stack exchange，提问作者Senith Vijayantha