为什么flex属性需要配合父级选择器链式声明才生效？

问题原因 #

这是CSS选择器权重（特异性）规则导致的样式覆盖问题，具体逻辑如下：

1. 先明确两个冲突选择器的权重 #

CSS选择器的权重按选择器类型计算，优先级从低到高为：元素选择器 < 类选择器 < ID选择器 < 行内样式，对应的基础权重值分别为1、10、100、1000。
你代码里两个作用于flex容器内first元素的选择器权重计算结果：

• .flex-container div：由1个类选择器+1个元素选择器组成，总权重 = 10 + 1 = 11
• 单独的.first：只有1个类选择器，总权重 = 10

权重更高的选择器，定义的相同属性会覆盖低权重选择器的对应属性。你把flex: 3 1 0%写在单独的.first里时，权重低于.flex-container div的flex: 1 1 0%，所以flex属性被覆盖，无法生效。

2. 为什么背景色能生效 #

因为.flex-container div选择器里没有定义background-color属性，两个选择器没有对这个属性的冲突定义，所以.first的背景色样式自然会生效。
你可以观察border属性的表现也能印证规则：.flex-container div定义了红色边框，单独.first定义了橙色边框，你会发现flex容器内的first元素边框是你写在.flex-container .first里的蓝色——因为.flex-container .first的权重是10+10=20，比11更高，所以会覆盖掉前面两个选择器的border定义。

基础规则补充 #

CSS样式优先级判断顺序：

1. 优先判断是否有!important标记，有则优先级最高（不推荐滥用）
2. 无!important时比较选择器总权重，权重越高优先级越高
3. 权重完全相同时，后定义的样式会覆盖先定义的样式

如果想让单独写的.first的flex属性生效，你可以调整它的权重：

• 写法改为.flex-container .first（就是你之前生效的写法，权重20）
• 写法改为div.first（权重1+10=11，和.flex-container div权重相同，只要代码写在.flex-container div之后就会生效）

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